CODEWITHSUNDEEP
jquery
Daniel
Daniel

Reputation: 241

Execute code when animation finished jQuery

$(this).animate({"left": left+"px"}, { queue: false, duration: 500 })
.animate({"top": top+"px"}, { queue: false, duration: 500 })
.animate({"height": size+"px"}, { queue: false, duration: 500 })
.animate({"width": size+"px"}, { queue: false, duration: 500 });

I´m a beginner at jQuery. I want the following code to run when the animation has finished:

$('#map').css('cursor','pointer');

How can I do that? And also, if my code is bad, I would be very thankful if you improved it.

Thanks!

Upvotes: 1

Views: 1728

Answers (4)

CashIsClay
CashIsClay

Reputation: 2320

$(this).animate({
  "left": left+"px",
  "top": top+"px",
  "height": size+"px",
  "width": size+"px"
},{
  queue: false, 
  duration: 500,
  complete: function(){
    $('#map').css('cursor','pointer');
  }
});

Upvotes: 0

mu is too short
mu is too short

Reputation: 434665

You could animate them all at once and use the "complete" callback:

$(this).animate({
    left:   left + 'px',
    top:    top  + 'px',
    height: size + 'px',
    width:  size + 'px'
}, {
    queue:    false,
    duration: 500,
    complete: function() {
        $('#map').css('cursor','pointer');
    }
});

Upvotes: 3

Lothar
Lothar

Reputation: 527

    $(this).animate({"left": left+"px"}, { queue: false, duration: 500 })
    .animate({"top": top+"px"}, { queue: false, duration: 500 })
    .animate({"height": size+"px"}, { queue: false, duration: 500 })
    .animate({"width": size+"px"}, { queue: false, duration: 500,
      complete : function() {
         $('#map').css('cursor','pointer');
          }
    });

It should be that way if I understood correctly.

Upvotes: 0

Matt Bradley
Matt Bradley

Reputation: 4495

Try this:

$(this).animate(
    { // map of the properties to animate
        'left': left + 'px',
        'top': top + 'px',
        'height': size + 'px',
        'width': size + 'px'
    },
    500, // animation duration
    function() { // function to execute when animation is completed
        $('#map').css('cursor','pointer');
    }
);

Upvotes: 1

Related Questions