Question

这很难解释，所以我在下面加了一个代码示例，并用jsFiddle链接来演示这个问题。

这里有...我有以下代码，我在这里创建一个JS对象，它有控制一些基于JQuery（1.6.4）的动画的方法。如果我同时启动父动画和子动画，那么在父完整回调中我停止子动作，父动作完成函数会被多次调用。但是，如果我将这些方法从对象中拉出来，那么我就没有这个问题。知道为什么，以及如何在保持对象中包含所有内容的同时解决这个问题？

http://jsfiddle.net/um3dU/41/

HTML

<div id="parent">
    <div id="child">
       <div id="scrolling-text">  
           this is scrolling text to explain the issue I'm running into      
       </div>    
    </div>    
</div>

CSS

#parent         { position: absolute; left: 0px; top: 0px; width: 960px; height: 100px; background-color: blue; }
#child          { position: absolute; left: 0px; top: 25px; width: 400px; height: 20px; background-color: red; }
#scrolling-text { position: absolute; left: 0px; }

的Javascript

var animation = {   
    startChild : function() {
        $('#scrolling-text').animate({ 
             left: -400 
        }, 
        10000, 
        function() { alert('child complete function'); });       
    },

    stopChild : function() {
        $('#scrolling-text').stop();        
    },

    startParent : function() {
        $('#parent').animate({ 
             top: 240 
        }, 
        5000, 
        $('#parent').animate({ top: 240 }, 5000, 
           function() { alert('In parent complete function'); this.stopChild(); }.bind(this));      
}      
    }
};

调用对象方法

animation.startChild();
animation.startParent();

Answer 1

在致电animation

时引用您的stopChild()变量

var animation = {
    ...
    startParent: function() {
        $('#parent').animate({ 
           top: 240 
        }, 
        5000,
        function() {
            alert('in parent complete');
            animation.stopChild();
        });
    }
}

jsfiddle

JQuery Animate完成回调称为多次

1 个答案: