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/
Related
I am creating an off canvas navigation with CSS and JS. Everything works fine except that there's a delay in the following click event:
$('.open-nav').click(function(){
$('#trigg, #container').animate({left: "200"}, 300);
});
By clicking the .open-nav button, both the #trigg and #container div should move 200 pixels to the right within 300 milliseconds, starting at the same time. But the #trigg div starts the animation before the #container does.
What can I do?
I already tried "queue: false" but it's still delayed.
Thanks.
EDIT:
Tried using CSS3 animations instead?
$('.open-nav').click(function(){
$("#trigg, #container").addClass('open');
});
JSFiddle
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
I'm currently trying to make a div appear from behind another div after the user scrolls away from the top of the page.
I'm hoping to do this using animate so that it slides out. Like this...
http://jsfiddle.net/xaYTt/99/
But I can't figure out how to make the red box stay behind the blue box until the user scrolls away from the top of the page.
I also need to reverse this when the user scrolls back up to the top of the page, so the red box slides back under the blue box again.
Can anyone help me out?
This is not the most elegant solution, but it works nonetheless.
http://jsfiddle.net/37LZ5/
Components:
Use $(document).scroll as a trigger to know when scrolling
Use scrollTop() to know how far we're scrolling (0 = top)
Remember state to make sure animation doesn't get triggered a zillion times (var away)
Use .stop() to prevent weird behaviour when halfway through one animation, another animation gets triggered
I think you are looking for this take a look at this demo
Working demo
Code
$(document).ready(function(){
//$('#bottom-box').animate({'margin-top': '200px'}, 1500);
$('body').hover(function(){
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
}, function(){
$('#bottom-box').animate({'margin-top': '50px'}, 1500);
});
});
If my understanding about your question is correct, this is what you are looking for
Since you said, "User scrolls away from the top of the page", I added a div to be at the top of the page.
var isAlreadyOut=false;
$("#divPageTop").mouseover(function(){
if( isAlreadyOut==true)
{
$('#bottom-box').animate({'margin-top': '60px'}, 1500);
isAlreadyOut=false;
}
else
{
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
isAlreadyOut=true;
}
});
Here is the jsfiddle version
http://jsfiddle.net/xaYTt/103/
I did something with jsFiddle that might be what you are after, if I understood your question correctly.
Basically, the red box will animate when you scroll the window more than the distance of the blue box.
Not 100%, just a quick mock up to see if that's what you want.
(When you scroll, click on the scroll bar arrows for more accurate results)
Demo here: http://jsfiddle.net/peduarte/xaYTt/104/
I am using the following code to acheive a fadeIn/fadeOut effect on rollover/rollout of it's parent div.
$('.rollover-section').hover(function(){
$('.target', this).stop().fadeIn(250)
}, function() {
$('.target', this).stop().fadeOut(250)
})
It works correctly when I rollover the div and out slowly. However if I move my mouse over and then off the div quickly, it breaks the effect. The target div seems to get stuck at an opacity between 0 and 1.
What confuses me is that when I use the following code it works perfectly.
$('.rollover-section').hover(function(){
$('.target', this).stop().animate({
opacity: 1
}, 250);
}, function() {
$('.target', this).stop().animate({
opacity:0
}, 250);
})
So, I have two questions.
1 - why is my first code block behaving as it does?
2 - What is the difference between fadeIn()/fadeOut() and animating the opacity?
As it was stated already it's because those modify the css and change the display to none. By using fadeTo you can get the same effect, but it doesn't modify the css, so it should work correctly.
update example: http://jsfiddle.net/TFhzE/1/
you can also do
$('.rollover-section').hover(function() {
$('.target', this).stop().fadeTo(0,250);
}, function() {
$('.target', this).stop().fadeTo(250,0,function(){$(this).hide();});
});
to completely hide it yourself once it actually is complete.
I've put my answer from the comments here:
Just use the animate example you have there. Check here for an answer to why the fade animation behaves the way it does:
jQuery fade flickers
I am using a giant sprite for an element that changes different states at hover. I was wondering if there was a way to have the hover state image fade in? You can view my code live - here
Here's my code for the hover state for each span
$(".hf-1").hover(
function () {
$(this).css("background-position","0 -121px");
$(".hf-2").css("background-position","0 -242px");
$(".hf-3").css("background-position","0 -363px");
$(".hf-4").css("background-position","0 -484px");
},
function () {}
);
I am using Jquery to do the background image hover instead of basic css cause i have multiple hovers that need to be reset.
Thanks for any help.
Use something like this:
$(this).animate({"background-position": "0 -121px"}, "slow");
Rinse and repeat for the other three.
You would need to double-stack the backgrounds and fade from to the other. Won't be able to fade within the same container.
Or you can just use jquery's native fadeIn API.
$(this).click(function () {
$("this").fadeIn("slow");
});