jQuery animation only works once or twice? - javascript

I'm putting together a site where a client has requested a very specific animation in the quicklink scroller.
I've used jquery animate and jquery fadeIn to complete a glass-shine and glow effect on hover, but when hovered once or twice (partcularly if done in quick succession) it stops happening?
Link: http://clientzone.fifteenten.co.uk/visioncode/html
$('.fadehover').append('<div class="hover"></div>');
$('.fadehover').hover(
function() { $(this).children('div.hover').animate({"left": "+=505px"}, 300);},
function() { $(this).children('div.hover').css({left: "-=" + 505});
});
$('.fadehover a').hover(
function() { $(this).children('div.qlink_glow').fadeIn('fast')},
function() { $(this).children('div.qlink_glow').fadeOut('fast');
});
Any assistance would be hugely appreciated I'm so confused... I've had this happen on other hover effects too

Try .stop(true,true) before .animate, .fadeIn and .fadeOut

This error occurs on your element if you hover in before your last animation finished. A first attempt to me would be trying if it helps to stop the animation before beginning a new one:
$(this).children('div.qlink_glow').stop(true,true).fadeIn('fast');
I'll have to test it, can't say for sure if this will work, just a possibility you could try.

Related

jQuery click to fadeIn function not working

EDIT: Changed hover to click.
EDIT2: Ended up putting a 0.6 opacity copy div below it and applied the same animation and fadeOut to it, then made it fadeToggle on click which is working, but lags a bit. Any more efficient solutions are welcome!
I have a click function for a div element that's not working. I want the click to restore opacity to a previously faded element (that part works fine) but after hours of trying it's just not happening.
$(document).ready(function(){
$(document).scroll(function() {
$(".circle-nav-element-sm").animate({
left: '100px',
}, "slow");
$(".circle-nav-element-sm").fadeTo("slow", 0.6);
});
});
//Above part works fine.
$(document).ready(function(){
$(".circle-nav-element-sm").click(function() {
$(".circle-nav-element-sm").fadeIn("fast");
});
});
Can anyone see an obvious solution?
The jQuery fadeIn() method is used to fade in a hidden element.
At first make sure your circle-nav-element-sm div is hidden or not.If it is hidden it works for you if it is not please make sure it is hidden.
try using
$(document).ready(function(){
$(".circle-nav-element-sm").hover(function() {
$(".circle-nav-element-sm").fadeTo("fast",1);
});
});
I'm guessing fadeTo doesn't work well with fadeIn and fadeout
fadeIn vs fadeOut vs fadeTo

Why is my jQuery transition is glitchy?

I have a jQuery transition with a css overlay that will work fine if the user mouses over for a second or more....however if the user mouses over quickly then the overlay text stays put without the overlay background. Here is my jQuery code:
$(".cascade-t1").hover(function(){
$(".cascade-corner").fadeOut();
$(".overlay-t1").animate({"left": "-300px"}, 300, function(){
$(".cascade-overlay-content").fadeIn(200);
});
}, function(){
$(".cascade-corner").fadeIn();
$(".cascade-overlay-content").fadeOut(200, function(){
$(".overlay-t1").animate({"left": "130px"}, 300);
});
});
Here is the script in action
It looks like the issue is that you don't fadeIn() the .overlay-t1 text until the mouseenter animation is done, and on mouseleave you fadeOut() the text out right away before the animation. When you move your mouse in and out faster than initial the animation the code will fade out the text and then fade it in again (the issue you're seeing).
One possible solution is to slightly alter your bottom (mouseleave) function to resemble your top (mouseenter) function more closely. Something like:
$(".cascade-corner").fadeIn();
$(".overlay-t1").stop(true, true).animate({"left": "130px"}, 300, function () {
$(".cascade-overlay-content").fadeOut(200);
});
The .stop() is there to keep the animation from playing over and over when someone spams the box.
FIDDLE DEMO
Not sure how jquery animate works under the hood but it's possible it's using javascript to animate instead of css transitions. The benefit of css transitions is that it does all of the animation calculations before the animation begins and is hardware accelerated. Javascript is at the mercy of the scheduler at a very high level so it will always be choppy.
Try jquery transit.
http://ricostacruz.com/jquery.transit/

jquery animate opacity sudden display instead of smooth

I'm trying to animate some tab contents I've made. It works smoothly when fading the content out, but fading it in doesn't. The content just appears suddenly instead of fading in.
Please check my code here: http://jsfiddle.net/rqsJ8/2/
I've tried everything I can think of, but I can't figure why this is happening.
Please enlighten me.
Many Thanks
http://jsfiddle.net/rqsJ8/25/
Changed to use fadeIn and fadeOut.
I have updated the version with a new code and saved it on fiddle and here is the link: http://jsfiddle.net/rqsJ8/61/
you didn't probably mention a time for speed..
tabContent.animate({ opacity: 0 }, function() {
$(this).removeClass('selected');
}, speed );

How do I stop a bouncy JQuery animation?

In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle
It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});
You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
​
DEMO
Hope this helps
Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/
I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover
The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent

jQuery .stop() breaks subsequent animations

I'm trying to make an accordion-like menu with jQuery, but it refuses to cooperate: http://jsfiddle.net/vrcpK/1/
Here is my JavaScript:
$('#submenu div.submenu').hover(function() {
$('.submenu-head', this).addClass('visible');
$(this).siblings().each(function() {
$('div.submenu-body', this).stop(true).slideUp('slow');
$('p.submenu-head', this).removeClass('visible');
});
$('div.submenu-body', this).stop(true).slideDown(500);
}, function() {
$('.submenu-head', this).removeClass('visible');
$('div.submenu-body', this).stop(true).slideUp('slow');
});​
When you hover over an item twice, the menu dies and slowly shrivels up. After that, it lethargically reveals a third of the content.
I suspect it is a problem with my .stop(true) calls, but I can't figure out any other way to keep the menu from becoming gelatin after moving the mouse over it.
Any help would be greatly appreciated!
Seems like the height is set to whatever it is when hover out... try reseting the height to auto when the slide up is complete...
$('div.submenu-body', this).stop().slideUp('slow', function() {
$(this).height('auto');
});

Categories

Resources