chosen chosen - 3 months ago 27
jQuery Question

jQuery - Animating transform works only one time on the same element

Whenever I try to animate CSS transform(scale) with jquery, it works only the first time, after the first animation when I try to animate the same element again it just skips to the end.

HTML

<button class="button_v1">animate v1</button>
<div class="animate_v1"></div>


SCSS

div {
width: 200px;
height: 200px;
background: cyan;
margin-top: 10px;
margin-bottom: 10px;

&.animate_v1 {
-moz-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
-o-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
}
}


jQuery

var toggle_v1 = false;
$('.button_v1').click(function(e) {
if(toggle_v1) {
$('.animate_v1').stop().animate({ scale: 100 }, {
step: function(now, fx) {
$(this).css('transform', 'scale('+ (100-now)/100 +', 1)');
},
duration: 300,
});
}
else {
$('.animate_v1').stop().animate({ scale: 100 }, {
step: function(now, fx) {
$(this).css('transform', 'scale('+ now/100 +', 1)');
},
duration: 300,
});
}
toggle_v1 = !toggle_v1;
});


Here's a more detailed example that shows the behaviour (fixed): https://jsfiddle.net/4q76xz1u/51/

I've been on the struggle bus, trying to fix it for like 4 hours now, and I'm slowly becoming hopeless.

What the hell do I do next? Thanks in advance.

Answer
    var toggle_v1 = false;
$('.button_v1').click(function(e) {
    if(toggle_v1) {
        $('.animate_v1').stop().animate({ scale: 0 }, { 
            step: function(now, fx) {
                $(this).css('transform', 'scale('+ now/100 +', 1)'); 
            },
            duration: 300,
        });
    }
    else {
        $('.animate_v1').stop().animate({ scale: 100 }, { 
            step: function(now, fx) {
                $(this).css('transform', 'scale('+ now/100 +', 1)'); 
            },
            duration: 300,
        });
    }
    toggle_v1 = !toggle_v1;
});

Got the first one working but the second isn't co-oporating