CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
nika
nika

Reputation: 59

How do I disable div animations onclick() using jQuery?

I have a div which animates as soon as page loads. Then I have a button. After one clicks on this button I want to make a new div and animate it as it animated previous, but onclick() the first div also changes it's position. How should I do it to somehow disable animate effect on div which already animated.

<div class="wrapper">
    <div class="car"></div>
</div>
<button id="button">spawn new car</button>

$(document).ready(function() {
    var car = $('.car');
    car.animate({left:"+=367px"}, 2000);
    car.animate({top:"-=247px"}, 2000);


    $("#button").click(function () {
        $(".wrapper").append('<div class="car"></div>');
        var car = $('.car');
        car.animate({left:"+=367px"}, 2000);
        car.animate({top:"-=247px"}, 2000);
    });
});

Upvotes: 4

Views: 987

Answers (5)

ketan
ketan

Reputation: 19341

Following way you can move only newly added div.

Add one temporary move class when you add and remove it after animation.

$(document).ready(function() {
    var car = $('.car');
    car.animate({left:"+=367px"}, 2000);
    car.animate({top:"-=247px"}, 2000);


    $("#button").click(function () {
        $(".wrapper").append('<div class="car move">car</div>');
        var car = $('.move');
        car.animate({left:"+=367px"}, 2000);
        car.animate({top:"-=247px"}, 2000);
        $(".car").removeClass('move');
    });
});
.car{
  position:absolute;
  left:0;
  top:0;
}

.wrapper{
  position:relative;
  top:0;
  left:0;
  width:100%;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="car">car</div>
</div>
<button id="button">spawn new car</button>

Working Fiddle

Upvotes: 1

Amar Singh
Amar Singh

Reputation: 5622

As you said :

"but onclick() the first div also changes it's position"

Reason is you are assigning animate to class car and first div too has a class car thats the reason it changing position.

Solution will be give dynamic and distinct class or id

Random ID you can give like :

$("#button").click(function () {
        var id=Math.floor(Math.random() * 100) + 1;
        $(".wrapper").append('<div class="car_"'+id+'></div>');
        var car = $(".car_"+id+"");
        car.animate({left:"+=367px"}, 2000);
        car.animate({top:"-=247px"}, 2000);
    });

Upvotes: 1

Tharaka Arachchige
Tharaka Arachchige

Reputation: 807

Try this.. JSFIDDLE 

 $(document).ready(function() {
        var car = $('.car');
        car.animate({left:367, top:0}, 2000);


        $("#button").click(function () {
            $(".wrapper").append('<div class="car"></div>');
            var car = $('.car');
            car.animate({left:367, top:-1}, 2000);
        });
    });

    .car{
        border:1px #000 solid;
        height:150px;
        width:150px;
        position:relative;
    }

Upvotes: 0

Anoop LL
Anoop LL

Reputation: 1575

Try this

$(document).ready(function() {
var car = $('.car');
car.animate({left:"+=367px"}, 2000);
car.animate({top:"-=247px"}, 2000);


$("#button").click(function () {
    $(".wrapper .car").removeClass('car');
    $(".wrapper").append('<div class="car"></div>');
    var car = $('.car');
    car.animate({left:"+=367px"}, 2000);
    car.animate({top:"-=247px"}, 2000);
});
});

This will remove car class from current div and adds new div with car class

Upvotes: 0

Evan Burbidge
Evan Burbidge

Reputation: 867

It's animating because this new div is being created and pushing it further down the page. You could use an absolute positioning in order to hold it in place. But that might make the page look a bit rigid. I'd just add a smoothing effect to the buttons move.

Upvotes: 0

Related Questions