Question

我尝试创建一个jQuery动画并传入队列：true作为选项。但它不起作用，两个动画同时发生。

我在匿名函数中有2个jQuery动画，我试图传递队列的选项：true但它不起作用。它们都在同一时间运行。

以下是代码。我删除了一些动画元素，以便于阅读。

jQuery('#info-icon').clickToggle(
    function() {   
     console.log('clicked 1');
     jQuery('.more-info-icon').animate({top:"280", 'font-size':"14px", width:"30px", height:"30px"}, { duration:1000, queue: true });
     jQuery('.info-text-wrapper').animate({opacity:1}, {duration:1000, queue: true });
},
    function() {
      console.log('clicked 2');
      jQuery('.info-text-wrapper').animate({opacity:0}, {duration:1000, queue: true });
      jQuery('.more-info-icon').animate({top:"50%", 'font-size':"70px", width:"100px", height:"100px"},{duration:1000, queue: true });
});

I'信息'假设缩小并移动到容器的底部，之后文本淡入。然后切换应该相反。我在这里添加了一个链接。

http://hearnowmusic.net/anim_queue/index.html

注意：这些动画发生在自定义切换功能中，该功能未包含在此页面中。

任何帮助将不胜感激。

Answer 1

jQuery动画队列仅对在相同元素上完成的动画进行排队。在您的代码中，您将动画两个单独的元素，以便它们立即触发。你可以做的是使用'完整'回调选项在第一个动画之后触发第二个动画。

function() {
  console.log('clicked 1');
  jQuery('.more-info-icon').animate(
    {top:"280", 'font-size':"14px", width:"30px", height:"30px"},
    {
      duration:1000,
      complete: function(){
        jQuery('.info-text-wrapper').animate({opacity:1}, {duration:1000});
      } 
    }
  );
}

jQuery动画队列选项不起作用

1 个答案: