Pausing CSS transitions using a button with pure javascript and jQuery for a CSS Trick's article
A Pen by Zach Saucier on CodePen.
<h3>Pure Javascript</h3> | |
<div class='box'></div> | |
<button class='toggleButton' value='play'>Play</button> | |
<h3>jQuery</h3> | |
<div class='box'></div> | |
<button class='toggleButton' value='play'>Play</button> |
Pausing CSS transitions using a button with pure javascript and jQuery for a CSS Trick's article
A Pen by Zach Saucier on CodePen.
var boxOne = document.getElementsByClassName('box')[0], | |
$boxTwo = $('.box:eq(1)'); | |
document.getElementsByClassName('toggleButton')[0].onclick = function() { | |
if(this.innerHTML === 'Play') | |
{ | |
this.innerHTML = 'Pause'; | |
boxOne.classList.add('horizTranslate'); | |
} else { | |
this.innerHTML = 'Play'; | |
var computedStyle = window.getComputedStyle(boxOne), | |
marginLeft = computedStyle.getPropertyValue('margin-left'); | |
boxOne.style.marginLeft = marginLeft; | |
boxOne.classList.remove('horizTranslate'); | |
} | |
} | |
$('.toggleButton:eq(1)').on('click', function() { | |
if($(this).html() === 'Play') | |
{ | |
$(this).html('Pause'); | |
$boxTwo.addClass('horizTranslate'); | |
} else { | |
$(this).html('Play'); | |
var computedStyle = $boxTwo.css('margin-left'); | |
$boxTwo.removeClass('horizTranslate'); | |
$boxTwo.css('margin-left', computedStyle); | |
} | |
}); |
<script src="https://code.jquery.com/jquery-2.0.0.js"></script> |
.box { | |
margin: 30px; | |
height: 50px; | |
width: 50px; | |
background-color: blue; | |
} | |
.box.horizTranslate { | |
-webkit-transition: 3s; | |
-moz-transition: 3s; | |
-ms-transition: 3s; | |
-o-transition: 3s; | |
transition: 3s; | |
margin-left: 50% !important; | |
} |