Pausing Transitions

Developer
Zach Saucier
Size
2,098 Kb
Views
42,504
  1. Pausing Transitions Previews
  2. Pausing Transitions HTML Codes
  3. Pausing Transitions CSS Codes
  4. Pausing Transitions JS Codes

How do I make an pausing transitions?

Pausing CSS transitions using a button with pure javascript and jQuery for a CSS Trick's article. What is a pausing transitions? How do you make a pausing transitions? This script and codes were developed by Zach Saucier on 20 August 2022, Saturday.

Pausing Transitions Previews
IQ Test

Pausing Transitions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pausing Transitions</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='http://code.jquery.com/jquery-2.0.0.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pausing Transitions - Script Codes CSS Codes

.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;
}

Pausing Transitions - Script Codes JS Codes

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); }
});
Pausing Transitions - Script Codes
Pausing Transitions - Script Codes
Home Page Home
Developer Zach Saucier
Username Zeaklous
Uploaded August 20, 2022
Rating 3.5
Size 2,098 Kb
Views 42,504
Do you need developer help for Pausing Transitions?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zach Saucier (Zeaklous) Script Codes
Name
Yin-Yang CSS Image Animation
Simple, flat contact form
Hipster date intro screen
Responsive CSS bars
Simple p5.js music visualizer
Single element color loader
Personal site header 2017
Asset loading effects demo
CSS-Only Full Page Slider
CSS Callback Functions Using Iteration
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!