Question

有一天，我的jQuery动画集有一个非常奇怪的问题。

我尝试了多种方法，但所有方法都只给我一些奇怪的错误。

我为我的例子做了一个jsfiddle。请检查console.log并尝试在html中看到动画，它的表现非常奇怪。

我有一个首先关闭一个方框的菜单，首先淡出文本然后打开另一个方框，一次淡化每行文字。

我正在尝试阻止在动画仍在进行时点击菜单的其他元素的可能性。

我也尝试在每个函数中使用.promise().done(function(){...，但这不起作用。

我的js文件

$(document).ready(function(){

var ongoing=false;
var selected="one";

$("ul li").click(function(){

console.log("ongoing : " +ongoing);

if($(this).index() == 1 && selected != "two" && !ongoing ){
  console.log("clicked two and in");
  console.log(ongoing);
ongoing=true;
    var text=$("ul li:nth-child(1)").text();
console.log(text);    

    $("."+selected+" div").animate({"opacity": 0},1000,function(){
    $("."+selected).animate({'width': '0px'},1000,function(){
        $("."+selected).hide();
        $(".extra").animate({"color": "blue"},1000);
        $("."+text).show().animate({'width': '800px'},1000,function(){
                    selected=text;
                    $("."+selected+" div").each(function(i){ 
                     $(this).delay(i*2000).animate({"opacity":                   1},2000,function(){
                    console.log(i + " is finished");
                    if(i == 2){
                      ongoing=false; 
                    }
                   });      
                });


        }); 
  });
});


}

  else if($(this).index() == 2 && selected != "three" && !ongoing){
  console.log("clicked about and in");
   console.log(ongoing);
ongoing=true;
var text=$("ul li:nth-child(2)").text();
console.log(text);    

$("."+selected+" div").animate({"opacity": 0},1000,function(){
      $("."+selected).animate({'width': '0px'},1000,function(){
            $("."+selected).hide();
            $(".extra").animate({"color": "red"},1000);
            $("."+text).show().animate({'width': '800px'},1000,function(){
                  selected=text;
                  $("."+selected+" div").each(function(i){ 
                        $(this).delay(i*2000).animate({"opacity": 1},2000,function(){
                          console.log(i + " is finished");
                          if(i == 2){
                            ongoing=false; 
                          }
                        });
                  });
          });
      });
    });

  }


});

});

我的html文件

    <div class='extra'> Hi</div>

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

    <div id="content">

        <div class='one'>

            <div class='one-1'>test test test test</div><br>
            <div class='one-2'>test test test test</div><br>
            <div class='one-3'>test test test test</div><br>

        </div>

        <div class='two'>


            <div class='two-1'>test test test test</div><br>
            <div class='two-2'>test test test test</div><br>
            <div class='two-3'>test test test test</div><br>

        </div>


        <div class='three'>


            <div class='three-1'>test test test test</div><br>
            <div class='three-2'>test test test test</div><br>
            <div class='three-3'>test test test test</div><br>

        </div>  
  </div>

我的css文件

ul li{

display:inline-block;
background: red;
cursor: pointer;
}


#content{

width:100%;
}

.three{

  margin: 0 auto;

  width: 0px;
  display: none;
  height: 360px;

  text-align: center;

background: #EEE836;

font-size: 50px;
  margin-bottom: 180px;
}

.two{

  margin: 0 auto;

  width: 0px;
  display: none;
  height: 360px;

  text-align: center;

background: blue;

font-size: 50px;

  margin-bottom: 180px;
}

.one{

  margin: 0 auto;

  width: 800px;
  margin-bottom: -180px;
  height: 360px;
  background: white;
  text-align: center;

background: red;

font-size: 50px;



}

Answer 1

（1）当您一次为多个元素设置动画时，您希望在最后一个动画完成后，只调用一次回调。

要完成此任务，您需要具备以下条件：

$("."+selected+" div").animate({"opacity": 0},1000,function(){

您可以将其更改为：

$("."+selected+" div").animate({"opacity": 0},1000).promise().done(function(){

我从this Stackoverflow question获得了这项技术。

（2）在你淡入某些东西之前，你必须首先确保它一直淡出。同样，在显示元素然后增加其宽度之前，必须确保它首先具有宽度0.这些更改可以使用.css()函数进行，并且应该在调用.show()之前执行。

例如，你有：

$("."+text).show().animate({'width': '800px'}...

你应该：

$("."+text).css({'width': '0px'}).show().animate({'width': '800px'}...

（3）以下技术不是使用（尽管更简单）使用.delay()动画顺序动画元素列表的技术，而是提供更好的结果：

var i = 0;
(function() {
    var $el = $($elements[i++] || []);
    if ($el.length > 0) {
        $el.animate({ opacity: 1 }, 2000, arguments.callee);  
    } else {
        // Perform final tasks.
    }
})();

我采用了这种技术from here。

DEMO ON JSFIDDLE

这个动画链的Jquery奇怪的行为

1 个答案: