jQueryホットバルーン - ループアニメーションで不透明度と位置を同時に変更する

気球が定期的に上昇したり下がったりするような熱気球アニメーションを作成しようとしています。#flame divが完全不透明に設定されています風船が落ちると隠れてしまいます。jQueryホットバルーン - ループアニメーションで不透明度と位置を同時に変更する

バルーンが上がったり下がったりしますが、タイミングをどのように変えても、時間の経過とともに炎の不透明度を変えることはできません。私は非常にいくつかの方法を試したので、どんな入力も非常に高く評価されるでしょう。

<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>

出典

2012-03-06 friendly_llama

万が一（必要に応じて）[jsfiddle]（http://jsfiddle.net）のデモ？ – nnnnnn

...

$(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); 
    });

トリッキーな部分は、タイミングのために使用する正しい番号を選択することになる...の

出典

2012-03-06 12:46:52