I want code in which a div fades out if mouse does not hover over it. This is the code which makes the div visible. As soon as it is displayed it fades out. I want that if a user hovers over it while it is fading out it stops fading and becoming as it was initially. And then as user hovers out of it it fades again.
$('#popuup_div').css({left:leftVal,top:topVal}).show().fadeOut(2000);
jQuery has a stop() function which stops all animations taking place on an element. Use it in a mouseover() event handler and you're done.
Check this fiddle. http://jsfiddle.net/6WMDz/1/
$('#popuup_div').on('mouseover', function() {
$(this).fadeIn();
});
I have used mouseover to fadeIn the div.
You can also use stop, but it is not resetting the display to initial state.
Related
I've accomplish successfully when the mouse overs a div to cycle and change the background-image and stop the other divs from cycle.
What happens is that, this div have a title which appears when the mouse is hovering the div, and if I grab the cursor and put it over the title and then move the cursor again to the other div title, the cycle continues in both divs, and I would like not to.
I'm clearing the interval cycle this way: clearInterval(theInterval);
But, somehow, when the title is being hovered it doesn't stop the others cycle.
The problem can be seen in JSFiddle.
Simulate the problem:
Put your cursor over the title
Move your cursor quickly to the other div title
You'll see that both divs continue the cycle independently (and I want only one to cycle)
Simulate how it works:
Put your cursor over the div (without being in the title)
Move your cursor to the other div
You'll see that only one div cycles
I believe it's a problem with the nature of the mouseover event, and the divs being in such close proximity. Try using the hover event instead. See this fiddle
In essence:
$('.collection-photo').hover(function(){
// mouse over stuff here
}, function() {
// mouse out stuff here
});
I have lists inside a div called header which I want to expand the lists on hover over each list, but I want all the lists which have been hovered over to stay open until the mouse is moved out of the header div. So far I have fadeIn/fadeOut for each list individually or I can get each list to fadeIn and stay open but not fadeOut whenever I move out of the div.
here is the code that I am using: http://jsfiddle.net/jTCdg/11/
The line commented out in the javascript is what changes between all the lists staying visible or the list fadeIn/fadeOut on hover.
This is my first time using javascript so help would be greatly appreciated. thanks
jQuery hover is a shortcut for the mouseenter and mouseleave event handlers. You can define both separately.
$(document).ready(function() {
$("#header ul").mouseenter(function() {
$(this).find("li").fadeIn();
});
$("#header").mouseleave (function() {
$(this).find("li").fadeOut();
});
});
Also see the updated jsfiddle.
I have an image with a play/pause button positioned absolute and centered over top.
see example;
http://jsfiddle.net/GuJWk/3/
The button appears when the user hovers over the img, and disappears when the mouse leaves the image.
The problem i'm having is a flicker when the user hovers over the button,
i suspect its because the images mouse out event has been triggered.
I know what the problem is and whats causing it, but i can't fix it.
I don't want to nest the pauseplay button, to get it working either.
I just need to manage the bubbling events some how..
Thanks,
Cam
Does this solve your problem?
http://jsfiddle.net/eHerL/
$("body").on("mouseover", "img", function(){
$('#pauseplay').stop(true,true).fadeIn(1000);
}).mouseleave(function(){
$('#pauseplay').stop(true,true).fadeOut(1000);
});
Add a .mouseenter event to $('#pauseplay'), which cancels the animation on hover:
$('#pauseplay').mouseenter(function(){
$(this).stop(false,false);
}).hide();
Demo: http://jsfiddle.net/GuJWk/11/
Also, $().hover(fn1, fn2) is a shorthand for $().mouseenter(fn1).mouseleave(fn2).
I am seeking for a way to fade a submenu in a list-ordered navigation as I want it to fade:
There is always an active menu item - and if the active menu item is in the submenu - also an active menu parent. So, at init the submenu with an active current item or current parent item should be visible. If I hover an other menu item, its submenu will fade in, the active one fades out. After leaving the whole menu, the active submenu fades in again. Plus, I used the jQuery plugin hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html) to give a timeout for each hover action.
This is what I got so far, but it's really buggy. For some reasons, submenus are sometimes just disappearing completely, also when hovering two items without leaving the navigation, two submenus overlap. Does anyone have an idea or tip for me? =) Please see a demo HERE: http://jsfiddle.net/BQuPz/
Problems with CSS: It's best not to play with display:none and opacity yourself, leave it up to jQuery and use the proper functions for fadeIn() and fadeOut().
Instead of putting display:block; float:left; on the menu's <li> elements, you should use display:inline-block. If you float the <li>s, that effectively tears them out of their parent container, leaving the ul with zero size, hence it is impossible to listen to mouseleave events unless you explicitly set its size.
Problems with code: In the hoverIntent plugin, timeout might not be what you're looking for. Timeout automatically fires the out event after a certain amount of time. To delay the hover effect, use sensitivity and interval instead. Check out the documentation page.
If you apply the above fixes, the only events needed are hoverIntent's over and the main navigation's mouseleave. The over event fades in the current submenu and fades out the rest, the mouseleave fades in the active submenu when the user hovers off the navigation. Look at your modified jsfiddle demo: http://jsfiddle.net/BQuPz/4/
// Hide inactive ones
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide();
// What to do when hovering over a menu item
$("#main-nav > li").hoverIntent({
over: function(){
// Find the hovered menu's sub-menu
var $submenu = $(this).find('.sub-menu');
// Stop the animation and fade out the other submenus
$('.sub-menu').not($submenu).stop(true,true).fadeOut(260);
// Fade in the current one
$submenu.fadeIn(260);
}
});
// What to do when user leaves the navigation area
$('#main-nav').mouseleave(function(){
// Fade out all inactive submenus
$('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260);
// Fade in the active one
$('.current-menu-parent .sub-menu').fadeIn(260);
});
Instead of using animate in $(this).find("ul").animate({'opacity': '1'}, 250);
I would have used fadeIn and fadeOut functions with callbacks. Then you're sure your fadeIn animation begins after the fadeout ends
element.fadeOut(250,function(){otherElement.fadeIn(250)})
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.