I am trying to loop a jQuery animation along with the jQuery UI 'explode' effect infinitely until an event stops it. Here is my code:
function movingPicture() {
$('img').delay(2800).animate({right: '44%'}, 3000, movingPicture).effect('explode');
$('img').css('right', '-100px');
$('img').show();
};
movingPicture();
This is supposed to have it loop infinitely according to some research I have done. An img would move left into view onto the document, explode, and then be reset back to the original position. Then, I would like it to perform the same animation infinitely until stopped. What am I doing wrong? Also, what is a way I could stop the loop when an event occurs, like a button is clicked. I am a beginner by the way, so try to keep it as simple as possible. Thanks!
You'd do that like so
function movingPicture() {
$('img').delay(2800).animate({right: '44%'}, 3000, function() {
$(this).effect('explode', function() {
$(this).css('right', '-100px').show();
movingPicture();
});
});
}
movingPicture();
FIDDLE
Related
Basically, any example here https://getbootstrap.com/docs/4.0/components/carousel/ should do the trick.
If you click on the indicators and then repeat the process fast, the animation keeps getting queued on top of itself and you have this weird queue of events chained together.
Is there a way in Javascript to stop the addition of these queues?
Let's say for example, I add a console log as so on the slide callback:
$('#myCarousel').on('slide.bs.carousel', function () {
console.log("slide")
})
Then if I check my console it will look something like this:
How do I prevent that number from continually increasing as I press the indicators in Javascript?
How would I do it for a on click event?
Okay, if anyone ever encounter this, this is how I solved it.
I added an extra class is-animated on the body (you can add it anywhere) then removed it with a 0.6 second timeout (the same time as the bootstrap animation duration in css).
jQuery('#carouselExampleCaptions').on('slide.bs.carousel', function (e) {
if ($("body").hasClass("is-animating")) {
return false;
}
$('body').addClass('is-animating');
// Do your code here
setTimeout(function () {$('body').removeClass('is-animating')}, 600);
});
I'm using this code to stop simultaneous animations on 2 elements:
$('#container').find('*').stop(true, true);
The animation can be stopped by an end user hovering over a button, in which case the animation stops after completion (which is what I want). However, the button hover also initiates another function (removes and reloads the elements), and there's a conflict if that function runs before the animations are complete.
I was thinking that using 'after' or 'complete' with the above code might work, but I can't figure out what the syntax would be.
im not sure what you are trying to achieve, but in order to check whether or not there are running/pending animations on the object using jQuery, you can use .promise().done()
example, somehing of this sort:
var animations_running;
$('#container').promise().done(function() {
animations_running=false;
});
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
//...do animations...
animations_running=true;
}
});
you can also add a callback function to your jQuery animations as follows:
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
$(this).animate({
left:+=50
},500,function(){
//...this is the callback function...
});
animations_running=true;
}
});
Here is the working demo.
http://jsfiddle.net/Evqqp/1/
Please check the demo to easily understand the issue. Click on the arrows fast and you will see the view mess up.
I understand it might be because of the 300ms animation i do. What is a clean way to handle the clicks such that it does not mess up the view. I can use a flag to check if the previous click action is complete. But i wanted to seek opinions if there is a better way to do this.
Code where i do the animate
$(".rightArrow").on("click", function () {
if ((Math.abs(parseInt($(".slideBox").css("margin-left"))) + $(".mainDiv").width()) < $(".slideBox").width()) {
$(".slideBox").animate({
"margin-left": parseInt($(".slideBox").css("margin-left")) - $(".mainDiv").width()
}, 300, checkRightArrow);
$(".leftArrow").show();
} else {
$(".rightArrow").hide();
}
});
Thank you
Check if your element is currently animated with the following
if(!$('#myElement').is(':animated'))
{
// Do your animation here
}
Try .stop(true,true)
$(".slideBox").stop(true,true).animate({
Whenever working with animations you should always stop() the previous animation on the element before animating it again.
$(".slideBox").stop(true, true).animate(...
http://jsfiddle.net/Evqqp/4/
You need to add
event.stopPropagation();
after:
$(".rightArrow").on("click", function () {
so:
$(".rightArrow").on("click", function () {
event.stopPropagation();
...
simple one i hope!
The problem im having is that i have an ('itemID').mouseover, which fires a jquery slide-down animation for a menu box.
The problem is that if the mouse leaves the original item (in this case a text link) before the end of the slideDown() amination, the .mouseleave function is not called.
It works fine otherwise!!
This is what im using: (menu14 is the text link, FunctionsMenu3 is the hidden div containing the menu items)
$('#menu14').mouseover(function() {
$('#FunctionsMenu3').slideDown('fast', function() {
// Animation complete.
});
});
$('#FunctionsMenu3').mouseleave(function() {
$('#FunctionsMenu3').slideUp('fast', function() {
// Animation complete.
});
});
It seem to me that the JS CANT be fired, because its busy doing the slide...
site can be seen at http://www.impero-classroom-management.com
thanks in advance!!
On mouseleave, try .stop() to cancel the current animation.
$('#menu14').hover(
function() {
$('#FunctionsMenu3').slideDown('fast');
},
function() {
$('#FunctionsMenu3').stop().slideUp('fast');
}
);
Well i got around it in the end by not animating the drop down, only the slide up.
not a fix, but it was all i could really do!!
$('#FunctionsMenu5').mouseleave(function() {
$('#FunctionsMenu5').slideUp('fast', function() {
// Animation complete.
});
});
$('#menu15').mouseover(function() {
$('#FunctionsMenu5').show();
});
I recently tried to use jQuery's effect('scale') function with the hover() function in jQuery. The idea is to enlarge the div element on mouseenter, and shrink it back to normal on mouseleave. The code is as follows:
$('.boxgrid').hover(function(){
$(this).effect('scale', {percent:125}, 1000);
}, function() {
$(this).effect('scale', {percent:80}, 1000);
});
I tried testing this in a jsfiddle, but instead of upscaling and downscaling once when a mouse enters the element, it keeps enlarging it. You can see the jsfiddle here. My question is how do I fix it? My understanding was that the mouseenter event was fired only once, and reset when the mouseleaves event is fired, but this seems to say otherwise? Am I missing something? Any help is greatly appreciated.
It calls the hover function every time the animation finishes. I modified it as follows and it appears to work:
window.boxScaled = false;
$('.boxgrid').hover(function(){
if(!window.boxScaled) {
window.boxScaled = true;
$(this).effect('scale', {percent:125}, 1000);
}
}, function() {
if(window.boxScaled) {
window.boxScaled = false;
$(this).effect('scale', {percent:80}, 1000)
}
});
I think you need to force the animation to stop if you leave the box before it has finished scaling (or reenter the box before it has shrunk):
$('.boxgrid').hover(function(){
$(this).stop().effect('scale', {percent:125}, 1000);
}, function() {
$(this).stop().effect('scale', {percent:80}, 1000);
});
http://jsfiddle.net/magicaj/9GLEy/10/
Your understanding of hover (mouseenter/mouseleave) is correct, they should only fire once upon entering/leaving.