I want the square rotation when I click the start button.but:
when I click once ,it is working. when I run twice ,this css3 effect is not working.
$(function(){
var $obj=$(".red");
$("#btnStart").on("click",function(){
$obj.removeClass("run").addClass("run");
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
.run{
transform:rotate(3600deg);
transition: transform 5s ease 0s;
-moz-transition:transform 5s ease 0s;
-webkit-transition:transform 5s ease 0s;
-o-transition:transform 5s ease 0s;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div>
<br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>
You need to have a timeout in between removing and adding the class. Otherwise it won't recognize the change.
$(function(){
var $obj=$(".red");
$("#btnStart").on("click",function(){
$obj.removeClass("run");
setTimeout(function(){
$obj.addClass("run");
}, 10);
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
.run{
transform:rotate(3600deg);
transition: transform 5s ease 0s;
-moz-transition:transform 5s ease 0s;
-webkit-transition:transform 5s ease 0s;
-o-transition:transform 5s ease 0s;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div><br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>
Instead of add/remove class, you can use animate() function of jQuery !
$(function(){
var $obj=$(".red");
$("#btnStart").click(function(){
$('.red').animate({ borderSpacing: -3600 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div>
<br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>
Related
I'm trying to call a CSS animation on the event that this button is pressed, after doing some research it seems classList is the way forward. It's late and I think I'm being stupid but I cannot get it to work.
HTML:
<body>
<img id="myID" class="mouse" src="mouse.png" onclick="ani()">
<script src="script.js"></script>
</body>
<head>
<link href="styles.css" rel="stylesheet"/>
</head>
JavaScript:
function ani()
{
document.getElementById('myID').classList.add = 'animate';
}
CSS:
.animate
{
animation: test 1s linear forwards;
}
#keyframes test
{
100%
{
transform: translateX(calc(8%));
}
}
add is a function so the way you are using classList needs a slight change from:
document.getElementById('myID').classList.add = 'animate';
to:
document.getElementById('myID').classList.add('animate');
function ani(){
document.getElementById('myID').classList.add('animate');
}
.animate {
animation: test 1s linear forwards;
}
#keyframes test {
100% {
transform: translateX(calc(8%));
}
}
<body>
<img id="myID" class="mouse" src="https://stock.wikimini.org/w/images/d/d4/Mickey_Mouse.png" onclick="ani()">
</body>
I need to transform an element with rotation, I want to animate (with transition) the transform but not the rotation.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.transF{
transform:translate3d(150px, 100px, 0px) rotateZ(-50deg);
transition : transform 3s linear;
}
</style>
<script>
var add = function(){
$("#test").addClass("transF");
}
var remove = function(){
$("#test").removeClass("transF");
}
</script>
</head>
<body>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="test">test</div>
</body>
</html>
Plunkr link
I don't think you can transition a specific property - use animation instead:
animate the translate3d
preserve the rotateZ value while the animation is happening
See demo below:
var add = function() {
$("#test").addClass("transF");
}
var remove = function() {
$("#test").removeClass("transF");
}
.transF {
transform: translate3d(150px, 100px, 0px) rotateZ(-50deg);
animation: translate 3s linear;
}
#keyframes translate {
from {
transform: translate3d(0px, 0px, 0px) rotateZ(-50deg);
}
to {
transform: translate3d(150px, 100px, 0px) rotateZ(-50deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="test">test</div>
You can change the to this one.
<style>
.transF
{
transform:translate3d(150px, 100px, 0px);
transition : transform 3s linear;
}
</style>
Just remove the rotateZ(-50deg).
Thank you.
<html>
<head>
<link rel="stylesheet" type="text/css" href="doll.css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../project/style.css" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(".rotation_90deg").click(function(){
$(this).toggleClass("down") ;
});
</script>
</head>
<body>
<div class="fa fa-anchor rotation_90deg"></div>
</body>
</html>
associated CSS:
.rotation_90deg{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
I am trying to rotate an icon using this code but it's not working, would someone be able to provide a solution or parallel code?
You need to move the code within document ready handler or move the script tag at the end of the HTML to run only after elements are loaded.
<script>
$(document).ready(function() {
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
});
</script>
.rotation_90deg {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
});
</script>
<a href="#">
<div style="margin-top:200px" class="fa fa-anchor rotation_90deg">11</div>
</a>
.rotation_90deg {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
<div style="margin-top:200px" class="fa fa-anchor rotation_90deg">11</div>
</a>
<script>
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
</script>
In case elements are dynamically added then you should use event delegation to listen to the click event of the element.
<script>
$(document).ready(function() {
$('body').on('click', '".rotation_90deg", unction() {
$(this).toggleClass("down");
});
});
</script>
I want to add some transition when #div getting timeout. I also add webkitTransition in setTimeout method but not found transition. please help me also edit my code.
<!DOCTYPE html>
<html>
<body>
<style>
#div {
opacity: 1;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
background:#BD5557;
position: absolute;
height: 500px;
width: 960px;
}
</style>
<div id="div">Display out after 1 second</div>
<script>
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){ x.style.display='none';x.style.webkitTransition = 'opacity 2s ease-in-out';
x.style.transition = 'opacity 2s ease-in-out';}, 1000);
}
displayOut();
</script>
</body>
</html>
</body>
</html>
The problem is that you are trying to apply display:none; at the same time you apply the transition.
Also there is no need to reapply all the css transition properties if they are declared in the css.
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){
x.style.opacity='0';
}, 1000);
}
displayOut();
Here is a working example
I'm trying to apply a toggleClass but it isn't applying the new class.
What's going on?
Click
<div id="main" class="invisible">
Hi there
</div>
.invisible{
opacity: 0;
}
.visible{
opacity: 1;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#main").toggleClass("visible");
});
});
Here's the jsFiddle
http://jsfiddle.net/Gilgamesh415/grxQX/17/
If you mean your fiddle, you forgot to add jQuery library, in the top left of the jsfiddle window.
Check here
If you mean your website check you have the jQuery library loaded by adding <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> inside you head tags.
try this:
<script type="text/javascript">
$(document).ready(function() {
$("#s").click(function(){
$("#main").toggleClass("n");
});
});
</script>
<div id="main" class="m"></div>
<button id="s">click</button>
<style type="text/css">
.m
{ opacity:0;}
.n
{
width:100px;
height:100px;
border:2px solid yellow;
background:green;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
opacity: 1;
}
</style>
demo here:http://jsfiddle.net/65Hg4/1/
$("#cf_onclick").click(function(e) {
e.preventDefault();
$("#main").toggleClass("invisible").toggleClass("visible");
});
http://jsfiddle.net/grxQX/18/
And try using a self invoking anonymous function:
(function(){
.... //your code
}(jQuery));
instead of
$(document).ready(function(){...});
Since best practice is to load the scripts at the bottom of your page, just before the closing </body> tag, you don't need to check if the document has been loaded ($(document).ready()), it already has.
Like this http://jsfiddle.net/micka/94pNW/