We Keep Coding

To make certain JS code more important than another (disappear on mouse out)

I know this might be silly but I would like to know if there is a way to realize.
Basically, I would like the dropdown-content element to 'KEEP DISPLAYING' even after 3 secs of mouse moving-out of the parental 'dropbtn' button or element.
E.g. code:
$(function() {
$('#dropbtn').hover(function() {
$('.dropdown-content').css('display', 'block');
}, function() {
// on mouseout:
setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
$('.dropdown-content').hover(function(){
$('.dropdown-content').css('display', 'block');
},function(){
$('.dropdown-content').css('display', 'none');
})
});
Current issue is that setTimeout() function is overriding my desired way on this particular line of JS code:
$('.dropdown-content').css('display', 'block');
In another word, I want setTimeout() to be effective if and only if I set not my mouse cursor on 'dropdown-content' div.
Hope someone can help out :)

Instead of using hover, you could use mouseenter/mouseleave to 'toggle' the .dropdown-content, except the delay of 3s on mouseleave:
$(function() {
var dropdownTimeout = null;
$('#dropbtn').mouseenter(function() {
if(dropdownTimeout) {
clearTimeout(dropdownTimeout);
dropdownTimeout = null;
}
$('.dropdown-content').css('display', 'block');
});
$('#dropbtn').mouseleave(function() {
dropdownTimeout = setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
});

Jquery slideDown not working right away

This is click function that search area will be slide down right under header. I made this with jQuery slideDown. But I can see that slideDown function is not working right away, It seem like waiting 1 second then slide down.
It is not a big problem, but this is bother me.
Is there any solution?
or this is just how slideDown function work?
Below is my code for reference:
/*header function*/
function showHeaderSearch_PC() {
$('.search_area').slideDown(260);
$('#search_btn_pc').fadeOut(150, function(){
$('#search_close_btn_pc').fadeIn(150);
});
}
function hideHeaderSearch_PC() {
$('.search_area').slideUp(260);
$('#search_close_btn_pc').fadeOut(150, function(){
$('#search_btn_pc').fadeIn(150);
});
}
function showHeaderAllMenu() {
$('.all_menu_area').slideDown(400);
$('#all_menu_btn').fadeOut(150, function(){
$('#all_menu_close_btn').fadeIn(150);
});
}
function hideHeaderAllMenu() {
$('.all_menu_area').slideUp(400);
$('#all_menu_close_btn').fadeOut(150, function(){
$('#all_menu_btn').fadeIn(150);
});
}
$(function(){//PC header search function
$('#search_btn_pc').click(function(){
hideHeaderAllMenu();
setTimeout(function(){ showHeaderSearch_PC();}, 400);
});
$('#search_close_btn_pc').click(function(){
hideHeaderSearch_PC();
});
});
$(function(){//PC header all menu function
$('#all_menu_btn').click(function(){
hideHeaderSearch_PC();
setTimeout(function(){ showHeaderAllMenu();}, 270);
});
$('#all_menu_close_btn').click(function(){
hideHeaderAllMenu();
});
});

I believe, you are using "slideDown" function with some value such as slideDown(500);
If you don't pass any value like slideDown(), it would slide down immediately

I have the JS script that makes one div disappear when showing another one. How to add fadein effect?

Here's my jsfiddle. The script itself is here:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
How can I add smooth fadein effect when one div disappears and the other one shows up? Thanks!

$(".div1").fadeIn();
$(".div2").fadeOut();
Running example:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
var e = $(this);
$(".div1, .div2").fadeOut().promise().done(function() {
if (e.attr("class") == "link1"){
$(".div1").fadeIn();
} else {
$(".div2").fadeIn();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Link 1
Link 2
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
The promise() is used to avoid the collision between fadeOut and fadeIn transitions

It looks like you need the fadeIn() method from jQuery, as explained in the docs:
The .fadeIn() method animates the opacity of the matched elements. It is similar to the .fadeTo() method but that method does not unhide the element and can specify the final opacity level.
if ($(this).attr("class") == "link1") {
$( "#div1" ).fadeIn( "slow", function() {
// Animation complete
});
} else {
$( "#div2" ).fadeIn( "slow", function() {
// Animation complete
});
}
Instead of slow you can also use a number for indicating the fade-in time, in milliseconds.

updated your fiddle.
simply replace show() with fadeIn()
http://jsfiddle.net/cEJtA/572/

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.