jQuery Transit animation not working in Firefox or IE

Question

I've been trying to mess around with the jQuery transit easing class located at: http://ricostacruz.com/jquery.transit/

I've set up a simple chaining of 4 .class elements, that I move from one spot to another. This is working fine in Crome - however in Firefox + IE there are no animation.

Im testing this at my dummy FB app page here: https://www.facebook.com/pages/Dette-er-en-test/186656608020464?sk=app_379428358804869

My sequence chaining is setup up like this:

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

Any ideas?

Unfortunately: "Note that not all browsers support this yet. Try it in Firefox 10+ or Webkit browsers!" I think this could work on IE10 with no or minimal modification — A. Wolff, Nov 22 '12 at 15:02
Hi Roasted. Thanks a lot. Do you think I can easily achieve the same result by just using some native jQuerying that is more cross-browser supported? I went for this one mainly because I wanted to use some different easing methods — user1231561, Nov 22 '12 at 15:47

score 1 · Answer 1 · answered Nov 27 '12 at 19:54

Not sure how elegant it is, however I managed to solve it eitherways with pure jQuery. The following is a chain of animation, where I move one element to one position and afterwards running a function for the same element making it end up in a final position.

I basically just repeated steps for all of my 4 elements in the same setup

<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 animation not working in Firefox or IE

1 Answers1