Question

我有这样的HTML代码：

<ul id="foo2">
<li>
    <img src="images/dandb.png" width="238" height="132" title="<span class='link-hover'>Merit Direct</span></br><br/> Polished, high-impact content including whitepapers, research reports, blog articles, advertorials," alt="" />
</li>
<li>
    <img src="images/demand_new.png" width="238" height="132" title="<span class='link-hover'>Merit Direct</span></br><br/> Polished, high-impact content including whitepapers, research reports, blog articles, advertorials," alt="" />
</li>
</ul>

并且在悬停图像时，我使用波纹管脚本完成了一个滑动效果：

$(document).ready(function(){                           
    var thumbs = $("#foo2 li img");     
    for (var i = 0, ii = thumbs.length; i < ii; i++){
        if (thumbs[i].title && thumbs[i].title.length > 0)
        {           
            var imgtitle = thumbs[i].title;     
            $(thumbs[i]).wrap('<div class="wrapperblue" />').               
            after('<div class=\'captionblue\'>' + imgtitle + '</div>').
            removeAttr('title');
        }                   
    }
    $('.wrapperblue').hover(
        function(){
            $(this).find('img').animate({opacity: "6"}, 200);       
            $(this).find('.captionblue').animate({top:"-309px"}, 350);          
        }, 
        function(){
            $(this).find('img').animate({opacity: "6"}, 200);                   
            $(this).find('.captionblue').animate({top:"0px"},200);
        }       
    );          
});

通过运行此代码，可以非常快速地完成对图像的悬停效果。我希望效果应该是平滑的，如果光标快速超出图像悬停区域，那么效果应该在那时停止。它不能完成它的过渡。

我该怎么做？

Answer 1

您应该调整计时器和stop功能以便在发布时停止

更改此

 $(this).find('img').animate({opacity: "6"}, 200);

在所有行上

 $(this).find('img').stop().animate({opacity: "6"}, 3000);

请注意更改stop()和3000（速度）

修改：更改了代码

$('.wrapperblue').hover(
        function(){
            $(this).find('img').stop().animate({opacity: "6"}, 3000);       
            $(this).find('.captionblue').stop().animate({top:"-309px"}, 3000);          
        }, 
        function(){
            $(this).find('img').stop().animate({opacity: "6"}, 3000);                   
            $(this).find('.captionblue').stop().animate({top:"0px"},3000);
        }

如何更改图像悬停的效果？

1 个答案: