jQuery热气球 - 在循环动画中同时改变不透明度和位置

Question

我正在尝试创建一个热气球动画，其中气球周期性地上升和下降，当它升起时#flame div设置为完全不透明度，当气球落下时它被隐藏。

气球上升和下降很好，但无论我如何改变时间，我都无法及时改变火焰的不透明度。 我已经尝试了很多不同的方法，所以任何输入都会非常感激。

<script type="text/javascript">
  $(document).ready(function(){

      $("#balloon").everyTime(10, function(){                        
         $("#balloon").animate({top:"100px"}, 1000);
         $("#balloon").animate({top:"0px"}, 1000);

      });


      $("#flame").everyTime(1000, function(){                        
         $("#flame").animate({"opacity": 0, duration: 1000});
         $("#flame").animate({"opacity": 1, duration: 1000});

      });

   });

<div id="balloon"><div id="flame"></div></div>

Answer 1

听起来你想要复制火焰和上升/下降之间的现实相关性。 看起来你应该拥有火焰“领先”并在火焰动画中提供一个完整的回调函数，这将导致气球开始上升。 试图兼顾两者都是不现实的。

Answer 2

你应该看看动画中的'队列'选项： http ： //api.jquery.com/animate/

如果设置为false，则动画同时开始，而不是按队列顺序开始。

Answer 3

我相信“每次”都必须是某种插件......

    $(document).ready(function () {


        var flame = $('#flame');
        var balloon = $('#balloon');

        flame.bind("flameOn", function () {
            // do your baloon animation here
        });

        flame.everyTime(function () {
            var that = $(this);
            that
                .css({ opacity: 0 })
                .animate({ opacity: 1, duration: 1000 }, function () {
                    $(that).trigger("flameOn"); // <-- Triggers AFTER the animation
                });
        }, 4000);
    });

棘手的部分是选择正确的数字用于计时......