CODEWITHSUNDEEP
javascriptjqueryjquery-animate
user1448485
user1448485

Reputation: 47

jquery animate then stop

Struggling a bit with jquery animate.

At the moment, if I continue to click button, clearly it shifts the object to the right 50px every time

$( ".button" ).click(function() {
  $( "#object" ).animate({opacity: 1,right: "+=50",}, 500, function() {}
);

Is there a way of ensuring that one click moves it once, then a second click does not move it?

ie. a rule that moves it to right:50px and thats it, rather than + 50px?

Any assistance hugely appreciated!!

Upvotes: 0

Views: 140

Answers (2)

Felix
Felix

Reputation: 38112

You can use one():

$(".button").one('click', function () {
    $("#object").animate({
        opacity: 1,
        right: "+=50",
    }, 500, function () {

    });
});

or I'd suggest you to disable the button to let your users know about your intention here:

$(".button").click(function () {
    var $this = $(this);
    $("#object").animate({
        opacity: 1,
        right: "+=50",
    }, 500, function () {
        $this.prop("disabled",true);
    });
});

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Use .one()

$( ".button" ).one('click',function() {

Fiddle Demo

Upvotes: 2

Related Questions