I have a small hover method which increases the height of images. The problem is that animate is automatically changing the image from display:block to display:inline. How can I tell jQuery not to change this when animating?
phoneCarousel.find("li td.img img").each(function(){
$(this).data('height', this.height);
});
// Add mouse methods to each phone
phoneCarousel.find("li").bind('mouseenter mouseleave', function(e) {
var img = $(this).find("td.img img");
phoneCarousel.find("li").removeClass("activ开发者_如何学运维e");
$(this).addClass("active");
if(img.data('height')>0){
img.stop().animate({
height: img.data('height') * (e.type === 'mouseenter' ? 1.2 : 1)
});
}
});
try this way:-
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
});
Sample HTML CODE:
<ul class="hover_block">
<li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li>
<li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li>
</ul>
精彩评论