jQuery：停止在多次翻转时重复动画？答案

【问题标题】：jQuery: Stop repeating animation on multiple rollovers?jQuery：停止在多次翻转时重复动画？
【发布时间】：2012-02-25 04:20:05
【问题描述】：

我无法停止动画...如果我滚动链接以显示一个框 5 次然后脱落..“显示”效果发生 5 次...当我脱落时我只想要它显示一次....

基本上它似乎陷入了一个循环......

任何想法如何停止多个实例？

jQuery(document).ready(function(){
    jQuery('.ttip').hover(
        function() {
            var offset = jQuery(this).offset();
            console.log(offset)
            var width = jQuery(this).outerWidth();
            var tooltipId = jQuery(this).attr("rel");
            jQuery('#tooltip-container').empty().load('tooltips.html' + tooltipId).fadeIn(500);
            jQuery('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
        },
        function() {
          jQuery('#tooltip-container').fadeOut(500);
        });
});

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

你应该使用stop(true)。

见http://api.jquery.com/stop

【讨论】：

【解决方案2】：

正如Stefan 所说，使用您的代码强制动画以 stop(true) 跳转到结尾，就像这个示例一样：

jQuery(document).ready(function(){
jQuery('.ttip').hover(
    function() {
        var offset = jQuery(this).offset();
        console.log(offset)
        var width = jQuery(this).outerWidth();
        var tooltipId = jQuery(this).attr("rel");
        jQuery('#tooltip-container').empty().load('tooltips.html' + tooltipId).stop(true).fadeIn(500);
        jQuery('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
    },
    function() {
      jQuery('#tooltip-container').stop(true).fadeOut(500);
    });
});

【讨论】：