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