1

アイテムが上がると、フェードアウトします。その後、アイテムは再び下に戻り、最初からやり直します。
オブジェクトが最初に上がった後、下がってからフェードイン（）してから最初からやり直すときに、オブジェクトがまだ見えない、より継続的な効果を作成したいと思います。それは可能ですか？これを書くためのより良い方法はありますか？

$(".item")
    .animate({"marginTop":"-100px",opacity:0}, 3000,'linear')
    .animate({"marginTop":"0px",opacity: 0.5}, 600, 'linear', runMyFunctionAgain);
4

2 に答える 2

1

これには実際には同時タイマーがないため、アプローチは十分に機能します。私があなたが望んでいたと思ったものの例については、このjsFiddleをチェックしてください。サイトに問題がある場合のコードは次のとおりです。

<html>

<div class="item">Some Item Content</div>​

js

var initAnime = (function StartAnimation(){
 $('.item').animate(
  {"marginTop":"-100px",opacity:0},
  3000,
  'linear',
  function(){
   $('.item').animate(
    {"marginTop":"0px"},
    600,
    'linear',
    function(){
     $('.item').animate(
      {opacity: 0.5}, 
      600, 
      'linear', 
      StartAnimation
     );
    }
   );
  }
 );
})();​

少しチェーンっぽくなったので、どこにあるのかを明確にするために、余分なインデントを追加しました。それがもう少し読みやすくなることを願っています。

于 2012-09-06T21:43:37.880 に答える
0

このフィドルをチェックして、これがあなたが考えていたものであるかどうかを確認してください。

http://jsfiddle.net/BvQDs/4/

HTML：

<div class="container">
    <div class="item"></div>
</div>
<div id="clickMe">
    <a href="#">Click Me!</a>
</div>​

JavaScript：

var animate = function(){
    $(".item").animate({"marginTop":"-100px",opacity:0}, 1000,'linear', function(){
        $(this).hide()
               .css({'marginTop':'0px', opacity:100})
               .fadeIn(1000, animate());
    });
};

$('#clickMe').on('click', function(){
    animate();
});
于 2012-09-06T21:46:33.773 に答える