I want to check when a transition ends, but it fires twice / multiple times, I want to check only one time when I click the element and call the function, and not again when remove the class, I tried with one(), stopPropagation() or even return false at the end of the function but it didn´t work, how achieve that?
Here is a example:
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition()
})
function checkEndTransition() {
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
$.when($(this)).done(function() {
console.log("Finished")
var val = $(this)
setTimeout(function () {
val.removeClass("example")
}, 1500)
})
})
}
})
.main{
width: 170px;
height: 170px;
background-color: lightgrey;
transition: 1.5s;
}
.example{
width: 250px;
height: 250px;
background-color: #7fff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
</div>
<div>
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition();
})
function checkEndTransition() {
var flag = true;
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
if(flag){
$.when($(this)).done(function() {
console.log("Finished");
var val = $(this);
setTimeout(function () {
val.removeClass("example");
}, 1500)
})
}
flag = false;
})
}
})
.main{
width: 170px;
height: 170px;
background-color: lightgrey;
transition: 1.5s;
}
.example{
width: 250px;
height: 250px;
background-color: #7fff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
</div>
<div>
Your problem is $(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() runs multiple time. You can use a flag to make it run only one time. Use above script and it will work.
It calls it three times because you are animating 3 elements - width, height, and background color. It calls "transitionend, webkitTransitionEnd ect." for each one when they finish.
To avoid this, instead of using transitions, use a keyframe object instead.
I also change the checkEndTransition() function to listen for animation end now instead of transition end...
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition()
})
function checkEndTransition() {
$(document).on("animationEnd webkitAnimationEnd", ".main", function() {
$.when($(this)).done(function() {
console.log("Finished")
var val = $(this)
setTimeout(function() {
val.removeClass("example")
}, 1500)
})
})
}
})
.main {
width: 170px;
height: 170px;
background-color: lightgrey;
}
.example {
animation: change 1 3s ease;
-webkit-animation: change 1 3s ease;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes change {
0% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
50% {
width: 250px;
height: 250px;
background-color: #7fff7f;
}
100% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
}
#keyframes change {
0% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
50% {
width: 250px;
height: 250px;
background-color: #7fff7f;
}
100% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
Related
What I want to happen is when I hover the cursor to an image, it will start the looping animation. And when I leave the cursor, it stops the animation. It indeed stops but the looping animation does not work anymore when I hover it to a image again.
$(".right-section img").mouseenter(function() {
var hoveredImage = $(this).attr("id");
function loop() {
$("#" + hoveredImage).animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop();
});
}
loop();
$("#" + hoveredImage).mouseleave(function() {
$(this).dequeue();
$(this).css({
bottom: ""
});
});
});
To do what you require call stop() to clear the animation queue for the img:
$(".right-section img").mouseenter(function() {
function loop($img) {
$img.animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop($img);
});
}
loop($(this));
}).mouseleave(function() {
$(this).stop(true);
});
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>
That being said, a far better approach would be to use CSS for the animation. CSS performs better, and also it better meets the separation of concerns principle. Try this:
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
.right-section img:hover {
animation: bounce 1s ease-in-out infinite;
}
#keyframes bounce {
0% { bottom: 0; }
50% { bottom: 15px; }
100% { bottom: 0; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>
After the first mouse over this text, it should move by 200px to the right, after another mouse over the text returns to its starting position (200px to the left).
This is my code:
$(function() {
var small = true;
$('div').click(function() {
small = !small;
if (small) var properties = {
left: '0px'
},
"slow";
else properties = {
left: '100px'
}, "slow"
};
$('.box').stop().animate(properties, 250);
});
});
Use onmouseover and then toggle class to right and set margin-left in css
For animation use transition: all .5s ease;
function func(){
$('.left').toggleClass("right");
}
div{
background-color:blue;
width:150px;
transition: all .5s ease;
}
.right{
margin-left:200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="func()" class="left">try me</div>
You have a type erro in your if else block , just remove the "slow" , and
annimation work :
See snippet :
$(function() {
val = 0;
var properties;
$('div').mouseover(function() {
if(val<200) val+=100;
else val =0;
properties = {
left: val+'px'
}
$('.box').stop().animate(properties, 250);
});
});
.box {
background-color: red;
display: block;
width: 50px;
height: 50px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid black">hover here</div>
<span class="box">Box</span>
You can also achive this using css transition (by removeing addin class)
See below snippet :
$(function() {
$('div').mouseover(function() {
if($('.box').hasClass("left100px"))
$('.box').toggleClass("left100px").addClass("left200px");
else if ($('.box').hasClass("left200px"))
$('.box').toggleClass("left200px");
else $('.box').toggleClass("left100px");
});
});
.box {
background-color: red;
display: block;
width: 50px;
height: 50px;
position:absolute;
transition: all .25s ease;
left:0;
}
.left100px{
left:100px;
}
.left200px{
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid black">hover here</div>
<span class="box">Box</span>
maybe below program will help you
$(function() {
var i = 0;
var value;
$('div').mouseover(function() {
if(i<200){
i+=200;
}
else {i =0;}
value = {
left: i+'px'
}
$('div').stop().animate(value, 1000);
});
});
div {
background-color: green;
display: block;
width: 100px;
height: 100px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div >hover mouse corsor here</div>
This code fades out an image on load after a delay. Is it possible to fade in a new image after the blue circle fades out? http://jsfiddle.net/gabrieleromanato/8puvn/
html
<div id="test"></div>
Javascript
(function($) {
$.fn.fadeDelay = function(delay) {
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow');
});
};
})(jQuery);
$('#test').fadeDelay(4000);
CSS
#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}
do your fade in code inside fadeOut call back.
$(that).fadeOut('slow', function(){
//do fade in
});
sample
(function($) {
$.fn.fadeDelay = function(delay, awake) {
$(awake).hide();
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow', function() {
$(awake).fadeIn('slow');
});
});
};
})(jQuery);
$('#test').fadeDelay(4000, "#test2"); //pass jquery selector, which element to show
.circle {
margin: 2em auto;
width: 10em;
height: 10em;
border-radius: 50%;
}
#test {
background: #069;
}
#test2 {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="circle"></div>
<div id="test2" class="circle"></div>
Ofcourse it's possible, in jQuery animations second parameter is the function that runs after animation completes. More info
(function($) {
$.fn.fadeDelay = function(delay) {
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow',function(){
$('#test2').fadeIn('slow');
});
});
};
})(jQuery);
$('#test').fadeDelay(4000);
#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}
#test2 {
margin: 2em auto;
width: 10em;
height: 10em;
background: #f69;
border-radius: 50%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"></div>
<div id="test2"></div>
Here's jsFiddle
How can I edit this fiddle to close the animation after few seconds?
$('div').animate({left: 0});
div{
background: red;
height: 100px;
width: 100px;
position: absolute;
left: -100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
Fiddle: http://jsfiddle.net/jamygolden/Ctv6N/
Update Code: - This box in this code shifts to the right side and does not completely disappear from the window.
<div class="animateSliding" id="animateSliding">
<script type="text/javascript">
$('#animateSliding').animate({right: 0}, 1000, function() {
var animateStuff = $(this);
var duration = 3000;
setTimeout(function () {
animateStuff.animate({right: '-300px'});
}, duration);
});
</script>
<p>You are almost done!</p>
</div>
CSS
.animateSliding {
background: #b2b2b2;
border-top: 3px solid #ccc;
height: 200px;
width: 300px;
position: absolute;
right: -300px;
padding-top: 80px;
padding-left: 80px;
border-radius: 5px;
color: white;
}
you need to use setTimeout()
$('div').animate({left: 0} , 1000 , function(){
var ThisIt = $(this);
var duration = 3000; // 3s duration to close -- change it as you like
setTimeout(function(){
ThisIt.animate({left: '-100px'});
}, duration);
});
Working Demo
According to the Animate you may add a second parameter that is the duration. There is also a parameter complete that is a callback to call when the animation is ended:
$(function () {
$('div').animate({left: 0}, 3000, "swing", function() {
$(this).animate({left: '-100px'});
});
});
div{
background: red;
height: 100px;
width: 100px;
position: absolute;
left: -100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
You can use it in this way:
$('div').animate({left: 0}, function(){
setTimeout(function(e){
$('div').animate({left: -100})
}, 2000)
});
Change the timeout (currently 2000) whith the value you prefer.
I would like to put in evidence a picture (and blur all the rest) when I am over a link. Here my Html:
<body>
<div id="back">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="menu">
one</div>
two</div>
</div>
</body>
and CSS:
#Back{
position: absolue;
background-image: url(images/fond.png);
width: 960px;
height: 600px;
margin: 0 auto;
}
#one{
background-image: url(images/formation.png);
width: 960px;
height: 600px;
z-index:1;
}
#two{
background-image: url(images/experiences.png);
width: 960px;
height: 600px;
z-index:2;
margin-top:-600px;
}
The problem i tried in css with this:
#link1:hover #one{
display:none;
}
And in javascript with this script:
function over(id){
if(document.getElementById(id)){
var objet = document.getElementById(id);
objet.style.display = "none";
}
}
Both doesn t work. I m not super good with the javascript. Thank so much for your help!!!
HTML:
<div id="menu">
link1
link2
</div>
<div class="div0" id="zero">
<div class="div1" id="one"></div>
<div class="div2" id="two"></div>
</div>
CSS:
.div0 {
position: absolute;
top: 30px;
left: 0px;
background-image: url(http://www.sanbarcomputing.com/images/js.jpg);
background-size: 400px 400px;
width: 400px;
height: 400px;
transition: 1s;
}
.div1 {
position: absolute;
top: 30px;
left: 0px;
background-image: url(http://www.sanbarcomputing.com/images/html5-logo.png);
background-size: 200px 200px;
width: 200px;
height: 200px;
transition: 1s;
}
.div2 {
position: absolute;
top: 30px;
left: 200px;
background-image: url(http://www.sanbarcomputing.com/images/class-header-css3.jpg);
background-size: 200px 200px;
width: 200px;
height: 200px;
transition: 1s;
}
JavaScript:
(function () {
var zeroEl = document.getElementById('zero'),
oneEl = document.getElementById('one'),
twoEl = document.getElementById('two'),
link1El = document.getElementById('link1'),
link2El = document.getElementById('link2');
function mouseover (elem) {
elem.style.opacity = '.2';
zeroEl.style.opacity = '.2';
}
function mouseout (elem) {
elem.style.opacity = '1';
zeroEl.style.opacity = '1';
}
document.addEventListener('DOMContentLoaded', function () {
link1El.addEventListener('mouseover', function () {
mouseover(oneEl); }, false);
link2El.addEventListener('mouseover', function () {
mouseover(twoEl); }, false);
link1El.addEventListener('mouseout', function() {
mouseout(oneEl); }, false);
link2El.addEventListener('mouseout', function () {
mouseout(twoEl); }, false);
}, false);
})();
jsfiddle
I could not get the CSS hover solution to work, for whatever reason.
NOTE: This solution uses modern JavaScript techniques that may not be compatible with legacy browsers
EDIT: Updated to use Pavlo's opacity solution, fixed css errors, changed image alignments, made images independent divs
First, assign a class to each link:
<div id="menu">
one</div>
two</div>
</div>
Then, if your css hover does not work, try using jQuery to do the hovering:
$('.link').hover(function() {
//handle mouse enter
}, function() {
//handle mouse leave
});
Refer: http://api.jquery.com/hover/