I have two buttons that control the image above, and they basically change the image in the forward direction or reverse direction. My code is as follows:
slider.fadeOut(400, function() {
$(this).attr('src', images[index]);
}).fadeIn(400);
console.log(index);
});
The problem is that if I have multiple button clicks, the image changes, but my fade animation happens like many times after, not just once to change the image.
Is there a way to stop the current animation, and proceed to fade in the next image? I just dont want multiply button clicks and then like 5 fade in's after.
You can use the stop() method to achieve this. Providing true as the first parameter will also clear the queue of any following animations, which is useful if someone has repeatedly triggered the parent event. Try this:
slider.stop(true).fadeOut(400, function() {
$(this).attr('src', images[index]);
}).fadeIn(400);
http://api.jquery.com/stop
Related
scenario:
An animation can be called multiple times.
The animation is called by another event such as a click event.
The animation should not fire until it is sure that all other animation events involving this structure are complete.
example: http://jsfiddle.net/xo6ngbfz/
jQuery( document ).ready(function() {
console.log('run');
jQuery("#animation-object").bind("fire-hide", function () {
jQuery(this).toggle();
});
jQuery('#element').on('click', function () {
console.log('click');
jQuery('*').trigger("fire-hide");
});
});
Further understanding:
This is a very simple animation; but say for instance someone had a set of tiles. These tiles slide up and down on the screen after a link has been clicked on.
If we do not wait for all animations to be complete, the slide effect could stop half way through the animation and revert to whatever animation was last clicked.
I did an example with your code. I hope it could be useful for you!
The key was use a counter for total animations you have and pass a function as a callback for each one:
jQuery(this).toggle("slow", animationFinished);
You shoud do it for each jquery function you want to it notify you that it was finished.
(when function not accept callback, it is enough call animationFinished() after it, see line 14 of the example).
When the counter of animations has finished is equal to the total animation counter, then a function is called and the counter is reseted.
It is no the best way to do it, because each time you add an animation, you have to modify the totalAnimations counter, but at least is an option for now.
I have say 5 list items with images inside placed 200px from eachother.
I am trying to animate these list items to slide horizontally left if one presses a link with the id = #next or if one swipes left. And vice versa for sliding the list items right.
Every click or swipe results in a slide animation of 200px on every list item.
I ran into a problem where spamming the #next or #prev button would cancel the current animation and start a new one. This results in list items not sliding 200px+200px+200... but something like this 200px+140px+120... This because like I said the animation is cut and therefore the sliding distance will be shorter.
Now I solved this for the clicking event by disabling the button before the animation starts and then re'enabling it on the end callbak function. But this problem is remaining for the swipe event.
How can I solve this problem for the swipe event?
If you have the code working for your click event handlers, then just .trigger() a click event on the proper element for each of the swiperight and swipeleft events:
$(document).delegate('#next', 'click.my-namespace', function () {
...
}).delegate('#prev', 'click.my-namespace', function () {
...
}).delegate('#my-page-id', 'swipeleft swiperight', function (event) {
if (event.type == 'swipeleft') {
$('#next').trigger('click.my-namespace');
} else {
$('#prev').trigger('click.my-namespace');
}
});
This way you have a single base of code that does the same thing, that gets called by multiple event handlers. I like to do this when I am adding touch events to a desktop design.
Notice I bound the event handlers with name-spaces so you don't accidentally trigger the wrong event handler.
You can also use .stop(true, true) but it may make your animations jittery when playing many in a row. The best solution when using .stop() is to always animate to an absolute value, never use +=200px, that way when you use .stop() the animation can be stopped and instantly restarted to the new absolute position: http://api.jquery.com/stop
One way you can do it is by setting a boolean variable that is global to the script with the default value of false. Then set the variable to true prior to animating and set it back to false once the animation is complete. Prior to setting off the animation, check the state of the variable, run the animation only if it's false. The code would look something like this:
var isAnimating = false;
function animate()
{
if(!isAnimating) {
//Animation code
isAnimating = false;
}
}
If the animation is asynchronous then you should set isAnimating = false in the completion function of the animation.
My website has some icons that glows on mouse over but I want it to glow randomly when no one is hovering.
Right now I have the correct piece of codes that will make it randomly glow and glow on hover but how to make the random glow stop and resume after a person has hovered over the icons.
Thank you.
Since you haven't provided much information, this is what I would think of doing:
Create a function that glows an icon
Create another function that calls glow function on random icons
Create a timer(Interval) to keep calling randomGlow function at a set interval
Attach a mouseenter event for the icon such that, when fired, it would clear the timer and call glow on that icon only. And when mouseout, it starts a new timer. (timer is global)
You can use .stop() to cease any existing effects.
However there isn't (AFAIK) any way to resume those effects once the additional effects started by your hover have finished.
You'd have to restart your "random" glowing in the second .hover() callback.
EDIT it may be possible, but this is untested:
call .queue() to get the current animation queue, and copy the results
call .stop() to remove all those
do your new animations
in .hover()'s "out" function, re-instate the queued items from #1 above
You can check to see if they icon is glowing before you glow it:
$('.icon').hover(function() {
$(this).stop(true, true);
$(this).toggleClass('glow', true);
}, function() {
$(this).stop(true, true);
$(this).toggleClass('glow', false);
});
function randomglow(icon) {
if (!$(icon).hasClass('glow')) {
//your glow code here
}
}
I have a JSFiddle here which lays out my problem: http://jsfiddle.net/Paddy/86YSN/7/.
It's a very simple marquee- the little white boxes simply move to the next/previous slide when clicked.
If you double click one, things go wrong, and a slide gets stuck out of position. I've been trying to find out how to simply disable the double click event for those elements for hours- I've tried this method:
$('#arrow_left').bind('dblclick',function(e){
e.preventDefault();
});
but no luck. Can anyone help?
(Many thanks).
You could forget about the dblclick event and just stop any animations already running by adding this line
$('.marquee_photos').stop(true,true);
into the functions called when processing the next animation. Working example -> http://jsfiddle.net/86YSN/11/
docs on stop() here
You should just check to see if its currently animated, if it isn't then go ahead and run your animation again. This allows your animation to finish, and I think is more in line with what you are wanting vs using the .stop().
if(!$('.marquee_photos').is(":animated")){
//your code here
}
JSFIDDLE HERE
I'm using some pretty standard JavaScript/jQuery to handle hovering elements, image swaps, sliding divs, animations, etc., it does not matter. If/when clicking an "hoverable" linked element takes you to a new page, the mouseenter hover state always sticks.
For example, if you hover over something and click it (links to another page), then use the back button to return to the page, the mouseenter state on the element you clicked, is stuck even though your mouse is no longer over the element.
You have to either reload the page or re-hover the element to reset everything.
$(document).ready(function() {
$('.mySelector').each(function () {
$(this).hover(enter, leave);
});
function enter(event) {
// mouseenter stuff
};
function leave(event) {
// mouseleave stuff
};
});
I seem to remember reading about this several weeks ago and there was a very simple fix but I can no longer find that.
Is anyone familiar with a proper solution?
Thank-you!
You don't need to use .each for this. Also, the functions should be outside .ready.
$(document).ready(function() {
$('.mySelector').hover(enter, leave);
});
function enter(event) {
// mouseenter stuff
}
function leave(event) {
// mouseleave stuff
}
Edit:
If your variables are local, you could do it like this:
$(document).ready(function() {
$('.mySelector').hover(function(){
// mouseenter stuff
},
function(){
// mouseleave stuff
});
});
I ended up simply "re-setting" the hover effects by calling the mouse leave function with the window "unload"...
$(window).unload(function() {
leave();
});
Whenever you leave the page by clicking the hovered element, the mouseleave function is called even though your mouse is still hovering over the element. Hitting the browser's back button no longer takes you back to the page with a "stuck" hover effect.
Problem solved.