Jquery finish on mouseout multiple events - javascript

Okay so I am trying to make multiple animations happen, onmouseenter i have a bounce effect that uses finish(); on mouseout and onclick moves position problem is, if you click and and then move your mouse out of the div it finishes the click animation, i have tried using variables, .data and other various methods but have failed miserably and am looking for a quick solution.
Here is the jsfiddle: http://jsfiddle.net/FR5Lu/
Here is the code
$.fx.speeds._default = 1000;
$.fn.StartBounce = function() {
var self = this;
(function runEffect() {
self.effect('bounce', {distance:20}, 5000, runEffect);
}) ();
return this;
};
$('.iconeffect').mouseenter(function() {
if (!$(this).is(":animated") ) {
$(this).stop().StartBounce();
}
});
$('.iconeffect').mouseout(function() {
$(this).finish();
})
$('#effect1').click(function() {
if( $("#desc1").is(":hidden") ) {
bounced = false;
$(this).finish();
$(this).stop(true, true).animate({ left: -50});
$('#effect2, #effect3').stop(true, true).animate({ left: 1000});
$('#desc1').show( "blind", 1000);
} else {
$(this).finish();
$(this).stop(true, true).animate({ left: 0});
$('#effect2, #effect3').stop(true, true).animate({ left: 0});
$('#desc1').hide( "blind", 1000);
}
});

You can use a custom queue for your onclick animation so that it's not affected by the call to finish() on mouseout, also finish() is essentially the same as stop(true,true); so you don't need both in your click funciton:
$('#effect1').click(function() {
if( $("#desc1").is(":hidden") ) {
$(this).finish().animate({ left: -50},{queue:'show'}).dequeue('show');
$('#effect2, #effect3').stop(true, true).animate({ left: 1000});
$('#desc1').show( "blind", 1000);
} else {
$(this).finish().animate({ left: 0},{queue:'show'}).dequeue('show');
$('#effect2, #effect3').stop(true, true).animate({ left: 0});
$('#desc1').hide( "blind", 1000);
}
});
Here's the updated fiddle
Note that when you use a custom queue you need to explicitly call dequeue() to start the animation

Related

How to add multiple event (mouseover/mouseout) into one selector

If I mouseover/mouseout very fast more than one time during animation times (here 900). Button is animating more than one time; even when I stopped mouse activity.
I want that it will take only one event for animation during animation times; even when multiple event triggered.
Other way I want to say if I triggered multiple mouseover event during 900 it will terminate immediately when I triggered mouseout and vice-versa.
$(document).ready(function () {
$("button").mouseover(function () {
$(this).css({
background: 'transparent',
color: '#09F'
});
$("button").animate({
width: "110%",
}, 900);
$(this).text("Show More >");
});
$("button").mouseout(function () {
$(this).css({
background: '#09F',
color: '#FFF'
});
$("button").animate({
width: "100%",
}, 900);
$(this).text("Show More");
});
});
Here's an JSFiddle to show you the behaviour
You need to use .stop()
Stop the currently-running animation on the matched elements.
Use
$(document).ready(function () {
$("button").mouseover(function () {
$(this).css({
background: 'transparent',
color: '#09F'
});
$("button").stop().animate({ //Here used stop
width: "110%",
}, 900);
$(this).text("Show More >");
});
$("button").mouseout(function () {
$(this).css({
background: '#09F',
color: '#FFF'
});
$("button").stop().animate({ //Here used stop
width: "100%",
}, 900);
$(this).text("Show More");
});
});
DEMO
Yes every time because you have some duration for example
$('somelemenent').animate({}, 400);
Your animation will stay in order if you hover element more quickly than your duration.
For this cases, you should set:
$('somelement').stop().animate(/* and your properties */);
Method .stop() stops all effects and orders which have connection with current element.
Use this : add another event after finishing previous one.
$(document).ready(function(){
$("button").mouseover(function() {
$( this ).css({background :'transparent',color : '#09F'});
$( "button").stop().animate({width: "110%",}, 900 );
$(this).text("Show More >");
}).mouseout(function() {
$( this ).css({background :'#09F',color : '#FFF'});
$( "button").stop().animate({width: "100%",}, 900 );
$(this).text("Show More");
});
});

jquery stop() doesn't work properly

I have some DIVs for products, and I have:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperContentVisible').animate({
height: '100px',
opacity: '1',
}, function(){
$(this).find('.productWrapperPrice').fadeIn();
$(this).find('.productWrapperByCompany').fadeIn();
});
});
// mouseleave
$(document).on('mouseleave', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperPrice').fadeOut('fast');
$(this).find('.productWrapperByCompany').fadeOut('fast');
$(this).find('.productWrapperContentVisible').animate({
height: '40px',
opacity: '.8',
});
});
and there are about 20 of products in each page, while I'm using stop(true,true), after I move my mouse on many of them many times, this doesn't work right, they continue to change height, and sometimes productWrapperPrice is still there while I don't have my mouse over there, it should go hidden.. .
sample: http://jsfiddle.net/gwsPB/
What's wrong with my code?
Thanks
Try this:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, false).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, false).animate({
height: '40px',
opacity: '.8'
});
});
DEMO
The problem is: when you mouseenter and mouseleave immediately fast enough, your animate function in the mouseenter event is not finished yet. When your call $this.find('.productWrapperContentVisible').stop(true, true), the animation is stopped but the callback function is called which display them again
function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany')
.stop(true, true).fadeIn();
}
By using stop(true, false), the callbacks are not called.
You need to call stop() on elements where are being animated, calling it on an ancestor element has no effect.
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, true).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, true).animate({
height: '40px',
opacity: '.8'
});
});

Deny jQuery events during an animation

On hover, I want to animate an div. During the animation I want to disable the hover possibility to avoid the animation call, several times. I removed the mouseenter event with unbind. Once the animation is finished the mouseenter event should be added again, but I'm not able to get this work.
Here is the jQuery:
items.hover(function (e) {
$(e.currentTarget).unbind('mouseenter');
if ($(this).hasClass('xy')) {
$('div.block', this).addClass('xxx').removeClass('zzz').animate({
top: '0'
});
}
}, function (e) {
if ($(this).hasClass('xy')) {
$('div.block', this).animate({
top: topHeightVal
}, 200, function () {
$(e.currentTarget).bind('mouseenter');
}).addClass('zzz').removeClass('xxx');
}
});
Try .stop()
Stop the currently-running animation on the matched elements.
Your code becomes
items.hover(function (e) {
$(e.currentTarget).unbind('mouseenter');
if ($(this).hasClass('xy')) {
$('div.block', this).addClass('xxx').removeClass('zzz').stop(true, true).animate({
top: '0'
});
}
}, function (e) {
if ($(this).hasClass('xy')) {
$('div.block', this).stop(true, true).animate({
top: topHeightVal
}, 200).addClass('zzz').removeClass('xxx');
}
});

jquery fade then redirect

Alright, I maybe a bit to strung out from caffeine atm to figure this one out on my own, but i'm trying to figure out how to redirect visitors to a page after splash image has faded.
$(document).ready(
function
()
{$('.wrapper a img').hover(
function ()
{
$(this).stop().animate({ opacity: .4 } , 200);
settimeout(function(){window.location = '/blog';}, 200);
}
)});
It's not working and is drving me a bit nutt
.animate allows you to define a callback that will be invoked when the animation is complete:
$(this).stop().animate({ opacity: .4 } , 200, "swing", function() {
window.location = '/blog';
});
The third argument ("swing") is simply the default for that parameter.
An alternative syntax for the same is
.animate({ opacity: .4 }, {
duration: 200,
complete: function() { window.location = '/blog'; }
);
Finally, yet another way is to use a .promise that will be completed when the animation queue for the element is empty (i.e. all animations have ended):
.animate({ opacity: .4 } , 200)
.promise().done(function() { window.location = '/blog'; });

How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations.
I need to do something like this...
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
but to run those two at the same time. The only thing I could think of would be using setTimeout once for each animation, but I don't think it is the best solution.
yes there is!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
That would run simultaneously yes.
what if you wanted to run two animations on the same element simultaneously ?
$(function () {
$('#first').animate({ width: '200px' }, 200);
$('#first').animate({ marginTop: '50px' }, 200);
});
This ends up queuing the animations.
to get to run them simultaneously you would use only one line.
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
Is there any other way to run two different animation on the same element simultaneously ?
I believe I found the solution in the jQuery documentation:
Animates all paragraph to a left style
of 50 and opacity of 1 (opaque,
visible), completing the animation
within 500 milliseconds. It also will
do it outside the queue, meaning it
will automatically start without
waiting for its turn.
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
simply add: queue: false.
If you run the above as they are, they will appear to run simultaenously.
Here's some test code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>
While it's true that consecutive calls to animate will give the appearance they are running at the same time, the underlying truth is they're distinct animations running very close to parallel.
To insure the animations are indeed running at the same time use:
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'});
$('#first,#second').dequeue('my-animation');
});
Further animations can be added to the 'my-animation' queue and all can be initiated provided the last animation dequeue's them.
Cheers,
Anthony
See this brilliant blog post about animating values in objects.. you can then use the values to animate whatever you like, 100% simultaneously!
http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/
I've used it like this to slide in/out:
slide : function(id, prop, from, to) {
if (from < to) {
// Sliding out
var fromvals = { add: from, subtract: 0 };
var tovals = { add: to, subtract: 0 };
} else {
// Sliding back in
var fromvals = { add: from, subtract: to };
var tovals = { add: from, subtract: from };
}
$(fromvals).animate(tovals, {
duration: 200,
easing: 'swing', // can be anything
step: function () { // called on every step
// Slide using the entire -ms-grid-columns setting
$(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
}
});
}
Posting my answer to help someone, the top rated answer didn't solve my qualm.
When I implemented the following [from the top answer], my vertical scroll animation just jittered back and forth:
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
I referred to: W3 Schools Set Interval and it solved my issue, namely the 'Syntax' section:
setInterval(function, milliseconds, param1, param2, ...)
Having my parameters of the form { duration: 200, queue: false } forced a duration of zero and it only looked at the parameters for guidance.
The long and short, here's my code, if you want to understand why it works, read the link or analyse the interval expected parameters:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
Where 'autoScroll' is:
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
Happy coding!

Categories

Resources