We Keep Coding

jQuery - slideDown on mouseenter > delay > SlideUp on mouseleave

I have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:
SlideDown on mouseenter
Stay visible until mouseleave
When mouseleaves, delay the SlideUp by 2 seconds
^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached
JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/
$(document).ready(function(){
$hover = true;
$( "#slide" ).mouseenter(function() {
if($hover) {
$( ".slide--hidden" ).slideDown('fast');
}
});
$( "#slide" ).mouseleave(function() {
$hover = false;
$( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
enableHover();
$(this).dequeue();
});
});
function enableHover() {
$hover = true;
}
});

Replace your javascript with this. It works great if i understood your problem correctly.
$(document).ready(function(){
var thetimeout;
$('#slide').mouseover(function() {
clearTimeout(thetimeout);
$('.slide--hidden').slideDown();
});
$('#slide').mouseleave(function() {
thetimeout = setTimeout(function() {
$('.slide--hidden').slideUp();
}, 2000);
});
});

Making a menu with toggle which can be animated using the top property

I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>

Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.

Fire jquery effect once for each mouseover

How can I stop a jquery effect after it's first execution on a mouseover? I want the box to bounce once and stop even if the mouse remains inside the box and repeat this for every time the mouse goes back into the box. Currently it runs the effect infinitely when mouse is inside the box. Thanks in advance.
I have made an example on jsfiddle
I tried:
one("mouseover", function() { $( "#div1" ).effect("bounce", "slow"); });
However this will not fire the event again when you leave the box and come back into it.

.one() works:
$( "#div1, #div2" ).one('mouseover', function() {
$(this).effect("bounce", "slow");
});
Demo: http://jsfiddle.net/Rxhzg/1/
UPDATE (based on updated question)
If by "on mouseover once" you mean just "one bounce" - add times parameter:
$( "#div1, #div2" ).mouseenter(function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
DEMO 2 http://jsfiddle.net/Rxhzg/4/

$( "#div1, #div2" ).one('mouseover', function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
$( "#div1, #div2" ).mouseleave(function() {
$(this).one('mouseover', function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
});
check this http://jsfiddle.net/Rxhzg/6/
OR check this one http://jsfiddle.net/Rxhzg/8/ because the above one will continue bounce if mouse is at bottom of box.
$( ".parentDiv" ).one('mouseover', function() {
$(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
$( ".parentDiv" ).mouseleave(function() {
$(this).one('mouseover', function() {
$(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
});

This example is similar to other answers, however it abstracts the original bind into a function for reusability.
var $target = $( "#div1, #div2" );
function bounce() {
$target.one('mouseover', function () {
$(this).effect("bounce", { times: 1 }, "slow");
});
}
$target.on('mouseout', bounce);
bounce();

fadeToggle seems to make the hidden div jump up

Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?

A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle

$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}

just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});

Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO

Run/fire/trigger javascript on button click?

Well I don't know correct word for this so I wrote three of them, hope you wont mind...
Now, my question.
I have javascript that is running on pageload as it's usual... The script hide specified id's and reveal them on click. Let's call this script "hide on load".
My problem here is, that another javascript, let's call it "news" is running as well on page load and I can see it only 1 second, until another script hide div id's.
Once I click on specified div that should run reveal "news", nothing happends. I can see that "hide on load" running fading (fadein) but nothing is being revealed.
Hide on Load script:
$(window).load(function(){
var activeElement;
function activateElement( eltSuffix ) {
if( activeElement ) {
activeElement.fadeOut( 500, function() {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
} );
} else {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
}
}
$(document).ready( function() {
$('#content div').hide();
$('#info a').click( function() {
activateElement('info');
} );
$('#search a').click( function() {
activateElement('search');
} );
$('#music a').click( function() {
activateElement('music');
} );
$('#socials a').click( function() {
activateElement('socials');
} );
} );
});
News script:
$(document).ready(function () {
$('#newsticker_1').newsticker({
'style': 'fade',
'showControls': false,
'autoStart': true,
'fadeOutSpeed': 'slow',
'fadeInSpeed': 'slow',
'transitionSpeed': '4000',
'pauseOnHover': true
});
})(jQuery);
Thank you!

You can use onclick html on the div so....
<div id="whatyouwanttoclickon" onclick="news()"></div>
But you would have to name the function news like this.
function news(){
$('#newsticker_1').newsticker({
'style': 'fade',
'showControls': false,
'autoStart': true,
'fadeOutSpeed': 'slow',
'fadeInSpeed': 'slow',
'transitionSpeed': '4000',
'pauseOnHover': true
});
Or you could use jquery like this....
$('#divyouwanttoclickon').click(function(){//putyourfunctioninhere});