display:block
в CSS нельзя сделать плавным при проявлении, так как это не предусмотрено.
Тут нужно использовать opacity
или visibility
.
Ну а правильным вариантом будут не прямая смена стилей, а замена class
.
css
div{
-webkit-transition: all 1s ease-out 0.5s;
-moz-transition: all 1s ease-out 0.5s;
-o-transition: all 1s ease-out 0.5s;
transition: all 1s ease-out 0.5s;
}
.show{
opacity: 1;
}
.hide{
opacity: 0;
}
js
$('div').hover(
function(){
$('div').attr('class', 'show');
},
function(){
$('div').attr('class', 'hide');
}
);
Как-то так, хотя jQuery уже есть предусмотренные методы на такой случай.
CSS
? Быстрее и плавнее в любом случае будет.