Question

我有一个小的悬停方法，可以增加图像的高度。问题是animate会自动将图像从display：block更改为display：inline。我怎么能告诉jQuery在动画时不要改变它？

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

尝试这种方式： -

$(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});
    });
});

示例HTML代码：

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

jQuery动画在img上更改从块到内联的显示

1 个答案: