0

我一直在尝试使用位于以下位置的 jQuery 中转缓动类： http ://ricostacruz.com/jquery.transit/

我已经建立了 4 个 .class 元素的简单链接，我从一个位置移动到另一个位置。这在 Crome 中运行良好 - 但是在 Firefox + IE 中没有动画。

我在我的虚拟 FB 应用程序页面上对此进行了测试： https ://www.facebook.com/pages/Dette-er-en-test/186656608020464?sk=app_379428358804869

我的序列链接设置如下：

<script>
$(document).ready(function()
  {
  $('.box1').hide();
  $('.box2').hide();
  $('.box3').hide();
  $('.box4').hide();

  $("#btn1").click(function(){
    $('.box1').show();
    $('.box2').show();
    $('.box3').show();
    $('.box4').show();

      $('.box1').
        css({ y: '+400px' }).
        transition({ y: -35 }, 350, 'out').
        transition({ y: 0 }, 150, 'in');
      $('.box2').
        css({ y: '+400px' }).
        transition({ y: -35, delay: 350}, 350, 'out').
        transition({ y: 0, }, 150, 'in');
      $('.box3').
        css({ y: '+400px' }).
        transition({ y: -35, delay: 700}, 350, 'out').
        transition({ y: 0, }, 150, 'in');
      $('.box4').
        css({ y: '+400px' }).
        transition({ y: -35, delay: 1050}, 350, 'out').
        transition({ y: 0, }, 150, 'in');
  });
});
</script>

有任何想法吗？

4

1 回答 1

1

不确定它有多优雅，但是我设法用纯 jQuery 解决了它。以下是一连串动画，我将一个元素移动到一个位置，然后为同一元素运行一个函数，使其最终到达最终位置。

我基本上只是在同一设置中对我的所有 4 个元素重复了步骤

<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.1.custom.js"></script>
<script>
    $(document).ready(function()
      {
          $('#j1').animate({
            top: '-170'
          }, {
            duration: 300,
            specialEasing: {
              height: 'easeOut'
            },
            complete: function() {
              $(this).after(end1());
            }
          });
    });

function end1(){
          $('#j1').animate({
            top: '-145'
          }, {
            duration: 100,
            specialEasing: {
              height: 'easeIn'
            },
            complete: function() {
              $(this).after(j2Start());
            }
          });
}
function j2Start(){
          $('#j2').animate({
            top: '-170'
          }, {
            duration: 300,
            specialEasing: {
              height: 'easeOut'
            },
            complete: function() {
              $(this).after(j2End());
            }
          });
}
function j2End(){
          $('#j2').animate({
            top: '-145'
          }, {
            duration: 100,
            specialEasing: {
              height: 'easeIn'
            },
            complete: function() {
              $(this).after(j3Start());
            }
          });
}
于 2012-11-27T19:54:41.353 回答