Question

当有人只是在当时徘徊所有元素但是以某种方式让他们等待时，我想让动画不能全部聚集在一起。请帮助我感谢任何一种。我的代码：

$(document).ready(function(){
$('.collapse1').hover(function(){
    $('.collapse2').stop(false,true);
    $('.collapsetext1').animate({
        width: 'toggle'
    }, 444)
});
$('.collapse2').hover(function(){
    $('.collapsetext2').animate({
        width: 'toggle'
    }, 444)
});
$('.collapse3').hover(function(){
    $('.collapsetext3').animate({
        width: 'toggle'
    }, 444)
});});

Answer 1

您可以对其进行设置，以便当button1触发其动画时，它会将状态var设置为true，以便其他动画可以查看它是否正在运行。然后，您可以让button1在完成时触发自定义事件，并将状态var重置为false。在按钮2或3触发之前，它们会检查button1的状态。如果状态显示为true，则它们将自己的动画绑定到自定义事件触发器。如果button1状态为false，则会立即触发。

这是否涵盖了您的用例？

以下是使用Ben Alman's really tiny pub/sub的示例：

/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
 * http://benalman.com/
 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */

(function($) {

  var o = $({});

  $.subscribe = function() {
    o.on.apply(o, arguments);
  };

  $.unsubscribe = function() {
    o.off.apply(o, arguments);
  };

  $.publish = function() {
    o.trigger.apply(o, arguments);
  };

}(jQuery));

$(document).ready(function(){

    var btn1run = false;
    var btnevent = new CustomEvent("btn1Complete", {});

    $('.collapse1').hover(function(){
        console.log("hover1");
        btn1run = true;
        $('.collapsetext1').animate({
            width: 'toggle'
        }, 1000, function() {
            btn1run = false;
            // trigger event
            $.publish("btn1Complete")
        }
      );
    });

    $('.collapse2').hover(function(){
        console.log("hover2");
        if (btn1run) {
            $.subscribe("btn1Complete", AnimateBtn2 );
        } else {
            console.log("run");
            AnimateBtn2();
        }
    });

    $('.collapse3').hover(function(){
        if (btn1run) {
          $.subscribe("btn1Complete", AnimateBtn3 );  
        } else {
            AnimateBtn3();
        }
    });

    function AnimateBtn2() {
        $('.collapsetext2').animate({
            width: 'toggle'
        }, 444, function() {$.unsubscribe("btn1Complete", AnimateBtn2);});

    }

    function AnimateBtn3() {
        console.log("3");
        $('.collapsetext3').animate({
            width: 'toggle'
        }, 444, function() {$.unsubscribe("btn1Complete", AnimateBtn3);});
    }

});

div {
 background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse1">
    <p class="collapsetext1">button 1</p>
</div>
<div class="collapse2">
    <p class="collapsetext2">button 2</p>
</div>
<div class="collapse3">
    <p class="collapsetext3">button 3</p>
</div>

Jquery动画整理和等待

1 个答案: