Question

我一直在尝试使用位于以下位置的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>

有什么想法吗？

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

jQuery Transit动画无法在Firefox或IE中运行

1 个答案: