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);
});
});

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 Delay overrule on next link or div hovered

I wrote a code where a div appears if someone hovers other div, I added the 5 seconds delay so the shown div stays but the problem is that I want it to stay until next link hovered. Means I need the first div to be disappeared if the second link hovered.
Here's JS Fiddle link of my existing code:
http://jsfiddle.net/np87e/880/
$( document ).ready(function() {
$("#theLink3").hover(
function () {
$("#theDiv3").slideDown();
},
function () {
$("#theDiv3").delay(5000).slideUp();
}
);
$("#theLink4").hover(
function () {
$("#theDiv4").slideDown();
},
function () {
$("#theDiv4").delay(5000).slideUp();
}
);
});

You need to call slideUp() of the div in next elements mouseenter callback
$("#theLink3").hover(function () {
$("#theDiv4").stop(true, true).slideUp();
$("#theDiv3").slideDown();
}, function () {
$("#theDiv3").delay(5000).slideUp();
});
Demo: Fiddle
Note: I'm not a fan of writing individual hover handlers like you have done. So
hover here
<div id="theDiv3" class="target">this is the div</div>
<hr />
hover here
<div id="theDiv4" class="target">this is the div</div>
<hr />
then
jQuery(function ($) {
var $targets = $('.target');
$(".trigger").hover(function () {
var $target = $(this).next('.target').stop(true, true).slideDown();
$targets.not($target).stop(true, true).slideUp();
}, function () {
$(this).next('.target').stop(true, true).delay(5000).slideUp();
});
});
Demo: Fiddle

Switch between Fade in and Fade out on click

I want to use jQuery to fade in a div when an image is clicked, when the image is clicked again, I want it to hide and so on.
How would I do this?
I basically need a toggle switch.

$('#my_img_selector').click(function(){$('#my_div_selector').fadeToggle()});
Try it out here.
Try also slideToggle() and toggle() in place of fadeToggle().

You have to change the selectors $('#fadeMe') and $('#bindImage') according to your markup. The magic is here
$(document).ready(function(){
$('#bindImage').on('click', function(){
$('#fadeMe').fadeToggle();
//return false; // only useful if you trigger an
});
});

$('#yourimage').on('click', function(event){
if ($("#something").is(':visible')) {
$(".something").hide("drop", {
direction: "up"
}, 2000);
}else{
$(".something").show("drop", {
direction: "up"
}, 2000);
}
});

How check mouseover on two elements ?

I need hide tooltip on mouseout of link, BUT not if mouseover on tooltip (both have different parents)
For example: we can see it on Facebook when hover on names or avatars friends
I try this but every time i get FALSE
$('a').bind('mouseleave', function () {
var i = $('div.tooltip').is('hover');
if(i===true){
console.log('cursor over the tooltip, so dont hide');
}
else{
console.log('hide tooltip');
}
});
How i can check both condition?

Put both the link and the tool tip in the same parent:
<div id="parent">
link
<div id="tooltip">tooltip</div>
</div>
And then in the script you can just put the mouseleave function on the parent:
$("#parent a").mouseenter(function(){
$("#tooltip").css("display","block"); //or however you handle this
});
$("#parent").mouseleave(function(){
$("#tooltip").css("display","none");
});

If you can't change your markup, use a timed event and abort it when the mouse enter either element, like so:
var timer;
$("a, .tooltip").mouseleave(function() {
timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
clearTimeout(timer);
});
function doSomething() {
console.log('hide tooltip');
}
Here's a FIDDLE