Develop Reference

On click fade out div then fade back in

I've implemented a toggle views page, where you can toggle between a list and a grid the animations between toggle states is a bit ugly (toggle using the two links at the top to see what I mean): http://jsfiddle.net/qvLoLhy7/2/
To get around this issue I am trying to apply a setTimeout function on the toggle buttons so that I can fade out the parent div #post-list first, then perform the layout change and then finally fade #post-list back in again to show the updated layout. When I implement this though the fade in/out works but the layout doesn't change: http://jsfiddle.net/qvLoLhy7/
Can anybody help find out why this might be happening?
Here's a snippet of the JS:
function init() {
optionSwitch.forEach( function( el, i ) {
el.addEventListener( 'click', function( ev ) {
$('#post-list').addClass('go'); // Fade out
setTimeout(function() {
_switch( this ); //Update layout. Switch refers to another function
}, 500);
setTimeout(function() {
$('#post-list').removeClass('go'); // Fade new layout back in
}, 1000);
}, false );
} );
}

You are using jquery yet you are not really using jquery. Jquery comes with a fadeIn and fadeOut animation that you can use.
var $pl = $('#post-list');
$pl.fadeOut('slow', function(){
//call back when animation is done
//here you can apply layout changes
$pl.fadeIn('slow', function(){
//call back when the fade in animation is done
//do other stuff here
});
});
Here is a basic example.
You should also transform your code to the jquery equivalent.
Let me know if this is what you were looking for.

Jquery if else statment for tooltip

I have a tooltip that appears when you mouseover a link. I want the tooltip to stay if you hover over it (because there are links and such in it), or disappear if you mouse away from the link.
I tried a couple things, but haven't figured it out. This is my first time building anything serious with jQuery.
The stuff below is what is in the .hover() 'handlerOut' event.
if($(this.a).mouseout())
{
if ($('.tip_container').hover()) {
$('.tip_container').css('display', 'block');
$('.tip_container').mouseleave(function() {
$('.tip_container').remove(0);
});
} else if ($('.tip_container').hover() == false && $(this.a).mouseoff() == true)
{
$('.tip_container').remove(0);
}
}
>>"this.a" refers to the link<<
With this and the other things I've tried the tooltip doesn't disappear unless you mouse over the off of it. I also tried
else if (!$('.tip_container').hover() && $(this.a).mouseoff()) {
Is it possible to have multiple conditions?
The main idea of the code is that if you mouse off of the link "this.a" the tooltip will be removed by:
$('.tip_container').remove(0);
but if you mouse over the tooltip it will not be removed until you mouse off of the tooltip.

Do you have a fiddle or anything to demonstrate?
Maybe something like
$(this, '.tip_container').hover(function () {
$('.tip_container').show();
}, function () {
$('.tip_container').hide();
}
);
Basically bind both the link and the tooltip elements to the hover method, which hides/shows the tooltip element on mouseenter/mouseleave. The link Pointy posted in comments is a good place to start

After a good nights rest and ignoring it for a while I figured out a solution. This is what I put in the hover handlerOut event.
var timer;
timer = setTimeout(function() {
$('.tip_container').remove();
}, 500);
$( '.tip_container' ).hover(
function() {
clearTimeout(timer);
$('.tip_container').css('display', 'block');
}, function() {
$('.tip_container').remove();
}
);
On the hover out of the link it will wait before executing the remove and if the mouse hovers over the tooltip it will clear the timer and set the tooltip to block to keep it displayed then on that hover out of the tooltip it will be removed.

Using MouseOver and MouseOut

Hi guys im working on my first website and im trying to implement a sliding menu using jquery.
This is what a got so far :
<a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
<script type="text/javascript">
function ShowBox()
{
$("#SlideMenu").slideDown();
}
function HideBox()
{
$("#SlideMenu").slideUp();
}
</script>
When i MouseOver the control my menu slides down but slides back up automatically.
What I would like is to let the user the time to select and option from the menu and if he doesn't, i would like the menu to close as soon as the mouse leaves the control.
Any idea why this isn't working ?
Thanks in advance.

Do your stuff without the inline JS, and remember to close the <a> element and use a ready function
<a id="test">Show box</a>
<script type="text/javascript">
$(document).ready(function() {
$("#test").on({
mouseenter: function() {
$("#SlideMenu").slideDown();
},
mouseleave: function() {
$("#SlideMenu").slideUp();
},
click: function(e) {
e.preventDefault();
}
});
});
</script>
FIDDLE

As you're using jQuery I believe it would be beneficial for you to use something similar to:
$("#box").hover(
function() {
//.stop() to prevent propagation
$(this).stop().animate({"bottom": "200px"}, "fast");
},
function() {
$(this).stop().animate({"bottom": "0px"}, "fast");
}
);
What this will mean is that whilst the mouse is over the menu, the menu will stay in its open position. When the mouse exits the menu it will close. Obviously change the id, and animation CSS values to suit your needs :)!
Here is a working example:
http://jsfiddle.net/V3PYs/1/

Really there is no problem here - the script is doing exactly what you told it to. However, from what I understand, what you want is for the menu to stay open when you leave the "trigger" element if the user's mouse is now over the menu. Try this:
<script type="text/javascript">
var timeout=250;//timeout in milliseconds to wait before hiding the menu
var menuMouseout;
$(document).ready(function() {
$("#trigger").hover(function(){
$("#SlideMenu").slideDown();
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
$("#SlideMenu").hover(function(){
clearTimeout(menuMouseout);
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
});
</script>
This way, the user is left some time after mousing out of the trigger element to get to the menu. You might need to fiddle with the timeout, but this should work. I tested this and it seems to be working. Just be sure, if necessary, to wrap this in $(document).ready to make sure all elements are loaded and ready.
Demo: http://www.dstrout.net/pub/menu.htm

If you're using jQuery this would be the proper way to go about it:
Show box
<script type="text/javascript">
$("#showBoxHref").hover(function() {
$(this).slideDown();
}, function() {
$(this).slideUp();
});
</script>
(just copy/paste this in and it should work)

Preventing jQuery function to repeat effect twice?

i am making a something like this :
When a user mouseenter DIV1 , the DIV2 will fadeIn and when the user mouseout DIV1 , DIV2 will fadeOut
But something weird is happening , when you hover in and out DIV1 quickly , the FADEIN and OUT effect of DIV2 will repeat the total number of your hovers in.
For example:
i quickly hovers in and out for 10 times # DIV1 , DIV2 will continue to FADE IN and OUT for 10 times although my mouse is not hovering it.
I hope people understand what i'm saying.
CODE:
$('div1').bind('mouseenter', function() {
$('div2').fadeIn(600);
});
$('div1').bind('mouseout', function() {
$('div2').fadeOut(600);
});
Thanks and have a nice day .

use .stop(true,true) on the mouseout event that will stop all the existing animations
here is the working fiddle http://jsfiddle.net/XkmFy/

You can stop the existing animation when you start a new animation instead of stacking them up:
$('div1').bind('mouseenter', function() {
$('div2').stop().fadeIn(600);
});
$('div1').bind('mouseout', function() {
$('div2').stop().fadeOut(600);
});

You want .stop, which stops the current animation so that the animation queue does not get filled up with deferred animations: http://jsfiddle.net/pQQ2G/.
$('#div1').bind('mouseenter', function() {
$('#div2').stop().fadeIn(600);
});
$('#div1').bind('mouseout', function() {
$('#div2').stop().fadeOut(600);
});
Also, you shuold use #div1. div1 selects div1 elements, whereas you have div elements I suppose.

use this
$('div1').bind('mouseenter', function() {
$('div2').fadeIn(600).stop(true, true);
});
$('div1').bind('mouseout', function() {
$('div2').fadeOut(600).stop(true, true);
});
hope it helps

Jquery drop down

Here is a jquery drop down i am trying to make: http://jsfiddle.net/qYMq4/2/
Basically i just want a div to drop down when a user mouses over a link and stay down unless i mouse away from the link or over the dropped down div and then away from the div. So it is almost like a standard drop down menu that you see in alot of website navigation, but this just has a bit of animation so it doesn't appear instantly.
I'm finding it terribly difficult, as you can see it doesn't quite function correctly. Any adivce? Thanks for your input.

You can see a working demo of the following here.
I prefer mouseenter[DOCS] and mouseleaveDOCS in this situation as it behaves better when hovering over children. I restructured your HTML so that the hover is over the parent div of the link, so that when you hover over the gray area that slides down it's not considered a mouseleave as follows:
<div class="mask-layer">
<a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
<div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>
I then restructured your Javascript to use .mask-layer for the hover events, and simplified the animation with slideUp[DOCS] and slideDown[DOCS] as follows:
$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
$('.slidedown').slideDown(600);
}).mouseleave(function() {
setTimeout(function() {
$('.slidedown').slideUp(600);
}, 200);
});

You can use the slideDown() and slideUp() methods - they're a littler easier to work with. You'll also want to use the windowSetTimeout. A lesser known feature is that it returns a number which will allow you to cancel the timeout. You can use that to keep the div open in the event the user scrolls down onto it. Some inspiration for this approach borrowed from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
$(document).ready(function() {
$('.slidedown').hide();
var timeout = 500;
var closetimer = 0;
$('a.top-link-cart, .slidedown').mouseover( function(){
cancel_timer();
$('.slidedown').slideDown(1000);
});
$('a.top-link-cart, .slidedown').mouseout( function(){
closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
});
function cancel_timer(){
if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;
}
}
});
http://jsfiddle.net/P567S/7/

if you are looking for a click action dropdown menu here it is
//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();
});
//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});
hope it works for you..... !!