I would like to have an image of an arrow pulsating, when the user clicks the arrow a div slides down and the pulsating arrow animation stops. When the user clicks the arrow again the div slides up and the arrow continues to pulsate.
I can toggle. I can pulse. However, I am unsure how to go about toggling a pulsating animation. If someone could point me in the right direction that would be great!
Many thanks.
$(document).ready(function(){
{
$(".arrow_down_grey").effect( "pulsate",
{times:5}, 3000 );
}
$('.arrow_down_grey').click(function(){
$(".arrow_down_grey").stop().effect();
$(".hiddenDiv").slideToggle();
});
});
jQuery has a .stop() method that halts animations. You would need to listen for clicks, and then start/stop the animation accordingly using .stop(). I'm thinking you would need to use the true flag to clear your animation queue, so the stop doesn't just "pause" the animation, but that's up to you. You would then use a closure to keep track of the "toggle status" and start the animation back up when your div is toggled the other way.
$('#animation').stop(false);
jQuery .stop documentation: http://api.jquery.com/stop/
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear')
.animate({ opacity: 1 }, 1200, 'linear', pulsate)
.click(function() {
$(this).animate({ opacity: 1 }, 1200, 'linear');
$(this).stop();
});
}
pulsate();
});
This code works but how would you start the pulse animation again?
Related
I am trying to hide a div with opacity animate function. Basically, I want the div to be hidden on click. But I want it to fadeout. Below is the code I have for it. can anyone help?
$("#div1").click(function() {
$(this).animate({ opacity: "0" }, 1000);
$("div").hide();
});
also, is it better to use fadeOut function instead of animate opacity?
fadeOut() is simpler because it will hide it for you automatically when it is done so you can save that code and it automatically waits for the animation to be done before hiding the element (something your current code was not doing).
$("#div1").click(function() {
$(this).fadeOut(1000);
});
Try this
JSFIDDLE
$("#div1").click(function() {
$(this).animate({ opacity: "0" }, 1000, function(){
$(this).hide();
});
});
Also you can use .fadeout(1000). to get same behavior.
You can use .fadeOut() API for this,
$("#div1").click(function() {
$(this).fadOut(1000);
});
I'm using jcarousel to animate an unordered list but since I need the animation to smoothly transition between items I'm setting the animation option to a very large integer, this works fine but I need to start the slide animation when I mouse over some links and stop it on mouse out, this is what I have so far:
$(function() {
function customCallback(carousel) {
$('.prev').hover(function() {
// Starts the back animation
carousel.prev();
}, function() {
// How to stop animation?
});
$('.next').hover(function() {
// Starts the forward animation
carousel.next();
}, function() {
// How to stop animation?
});
}
$('.list').jcarousel({
animation : 14000,
wrap : 'circular',
easing : 'linear',
buttons : false,
initCallback : customCallback
});
});
But I don't know how to stop the animation on mouse out, here's a demo to illustrate this better: http://jsfiddle.net/hfuwM/1/
Can anyone point me in the right direction? Thanks in advance
EDIT: I found that using carousel.list.stop() on the mouseout callback stops the animation but then it doesn't restart when hovering the links again.
I have a div to animate from the top to the bottom of another div. I'm currently playing w/ mouseenter/leave and JS animations w/ easing where its original state is up/top. I want to hover/mouseenter and have it move down and stay down if I mouseleave/hover off. When I hover again it will animate back to the top/start.
I initially used mouseenter/leave which obviously doesn't do what I need as I would like the state to remain the same upon mouseleave. So what function would be best for this need? I'm still learning the terminology and am stumbling over how to better phrase the question.
Code:
function init() {
mouseenter: function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
mouseleave: function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
}
});
}
window.onload = init;
I've edited your piece of code, see the comments for explanation:
$(document).ready(function(){ // Runs when document is loaded
$(".ltrP").mouseenter(function(){ // Mouseenter event on the given object (.ltrP)
var goTo = $(this).css("marginTop") == '0px' ? 170 : 0; // When the current margin-top is 0px animate to 170px, otherwise animate it back to 0px
$(this).stop(true,false).animate({ // Changed the stop(true, true) to stop(true, false), looks nicer in my opinion
marginTop: goTo // Animate to the just set variable
}, 1000);
});
});
And see here a demo: http://jsfiddle.net/hnDmt/
(And the easing "easeInBounce" was not working for me, so I removed it. (Maybe a jQuery UI easing?))
You can rewrite your code this way:
$(document).ready(function(){
init();
});
function init() {
$.hover(function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
});
}
There are lots of ways to do this. Maybe the easiest to to conceptualize is by adding a class to the animated item. You want to write two separate mouseenter functions.
For the first function, trigger your down animation, and add a class to the entered item. Call the class "moveddown" or something obvious.
Then, write a second mouseenter function. When an item with the class is mousentered, animate it up, and remove the class.
Forget about jQuery hover for this. It's just a wrapper for mouseenter/mouseleave. It can cause problems. The jQuery docs warn about it. It's usually better to write mouseenter and mouseleave functions separately, especially when you're trying to do something tricky, like this.
I am interested in a solution for jQuery .animate infinite loop break method.
$(element).mouseover(function() {
$(this).animate({ opacity: 1 }, duration, customFunc);
}).mouseout(function() {
});
And question now is how to break this loop? e.g within a mouseout event?
I can do it easily with setInterval and clearInterval but is there a way to it with .animate function?
Use the .stop method:
http://api.jquery.com/stop/
I assume you want to immediately stop the currently running animation?
$(element).mouseover(function() {
$(this).animate({ opacity: 1 }, duration, customFunc);
}).mouseout(function() {
$(this).stop();
});
You could stop the animation using .stop()
http://api.jquery.com/stop/
You might want to use .stop(true, true) to clear the queue and jump to the end of the animation
You can use .data() to store a flag of if you should animate anymore
http://api.jquery.com/jQuery.data/
Add an IF in your customFunc before you invoke animate again to check the flag of whether or not you should animate. That way you won't refire due to any other callbacks. In your mouseover you should set the flag to be enabled again.
If what you are experiencing is an effect where the animation queues up as your mouse enters and leaves the element repeatedly and continues to repeat the animation over and over several times after your mouse has left the element and not returned - I would recommend the jquery hoverflow plugin for you.
http://www.2meter3.de/code/hoverFlow/
How does jQuery's stop() actually work?
If you look here (http://jsfiddle.net/hWTT6/), when you hover over the main blue box it should fade to red, and when you hover off it should fade back. The problem is it will completely fade to red (and then back to blue) even if the mouse has hovered off before the first fade was complete. The problem can more clearly be seen with the slide effect. Hover over the slide "button" and the main box will slide to blue, hover off, it will slide back. But try hovering on and off and on and off, before the first animation has completed. You'll see that all four animations are carried out. I included both examples here to show it is not just a problem with one effect or something.
I thought this would be easily fixed by adding a stop before the animations, as shown commented out in the code. But, if I do this the current animation will stop and the following one will never start. Almost as though stop is blocking an animation that is occurring after the call to stop.
What am I missing here?
Thanks.
You are missing that .stop() accepts two arguments. Both boolean, indicating:
- clearQueue (first)
- jumpToEnd (second)
So by calling $('#foo').stop( true, true ).doSomeOtherStuff() you should get your desired goal.
Reference: .stop()
The problem is the CSS is getting messed up by stopping at arbitrary points.
The fadeIn(), fadeOut(), slideUp() and slideDown() move from the current state to a new one and then revert to that - not to the original CSS.
You need to fix the CSS back in to a usable state to continue with after the .stop(), or more clearly specify the animation targets.
As the others have said, you can get the CSS to the correct position, by ensuring that when you stop the animation, it jumps to the end of it, rather than leaving everything in an arbitrary state.
UPDATE:
Take a look at the code in this update of your demonstration: http://jsfiddle.net/hWTT6/5/
It might not be exactly how you want it to perform, but the trick, if you do not want the animation to run its course, is to get the animation back in to a state that it can continue from in the way in which you desire.
$(function() {
$('#fade')
.mouseenter(function() {
$('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() {
$('#fg_fade').css('height', '100%');
});
})
.mouseleave(function() {
$('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow');
});
$('#slide_fire')
.mouseenter(function() {
$('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() {
$('#fg_fade').css('opacity', 1);
});
})
.mouseleave(function() {
$('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() {
$('#fg_fade').css('opacity', 1);
});
});
});
You could set the stop() options to (true, true) so that you cancel all events in cue and jump to the end of the previous animation. look at the fiddle:http://jsfiddle.net/hWTT6/4/
The stop method can be called in the following difference ways:
.stop(true);
//Same as:
.stop(true, false); //Empty the animation queue only
//Or
.stop(true,true); // Empties the animation queue AND jumps to the end
//Default
.stop()
//Same as
.stop(false,false);
There may be a better way using .animate instead: Demo Here
$(function() {
$('#fade')
.mouseenter(function() {
$('#fg_fade').stop().css('height', '10em').animate({'opacity' : '0'}, 'slow');
})
.mouseleave(function() {
$('#fg_fade').stop().css('height', '10em').animate({'opacity' : '1'}, 'slow');
});
$('#slide_fire')
.mouseenter(function() {
$('#fg_fade').stop().css('opacity', '1').animate({'height' : '0'}, 'slow');
})
.mouseleave(function() {
$('#fg_fade').stop().css('opacity', '1').animate({'height' : '10em'}, 'slow');
});
});
This way the animation stops when you want it to and still runs the next animation.
The problem with doing .stop then slideUp/slideDown or fadeIn/fadeOut is that the animation can end prematurely and keep an incorrect height/opacity.
The problem is caused by the way fadeIn, fadeOut etc. work. You may expect them to fade between 0 and 1. However, in reality they fade between 0 and whatever the "baseline" opacity is. You can see this here:
http://jsfiddle.net/hWTT6/7/
You'll notice I set the initial opacity to .5. Now when I call fadeIn it does not fade all the way in to 1 it fades to my baseline of .5. Your problem occurs when you stop the animation prematurely, the "baseline" becomes whatever the opacity is at the time it is stopped. Now when you call fadeIn on mouseleave it tries to fade to this new baseline and finds it is already there. You can see this illustrated by going here:
http://jsfiddle.net/hWTT6/8/ (original, but with .stop)
If you place your mouse over slide and then remove it half-way through the animation, it will stop in the middle. Now place your mouse back over slide and wait for the animation to complete. If you now remove your mouse, you will see that it slides back down to the place where the first animation was stopped. That is because this is the new "baseline".
The way that you would solve this is actually to replace fadeIn, fadeOut, etc. with a more explicit animation. For instance, use fadeTo to tell it to fade between 0 and 1:
http://jsfiddle.net/hWTT6/6/
Notice that since I am telling it to fade to 0 or 1 everything works. A similar thing could be done to replace slideUp and slideDown using animate.