Question

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("active");
    $(this).addClass("active");
    if(img.data('height')>0){
        img.stop().animate({
            height: img.data('height') * (e.type === 'mouseenter' ? 1.2 : 1)
        });
    }
});

Answer 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>