Develop Reference

Show popup on hover only if i hover on li after 1 second

I'm trying to show inner div on hover on li. I'm doing fadeIn and fadeOut effect but the problem is when I hover quickly on all li fadeIn effect work for all. Where it should show only if I hover on li for 1 second and if I leave that element before one second it shouldn't show fadein effect.
<script type="text/javascript">
$(document).ready(function(){
var _changeInterval = null;
$( ".badge_icon" ).hover(function() {
clearInterval(_changeInterval)
_changeInterval = setInterval(function() {
$(this).find(".badges_hover_state").fadeIn(500);
}, 1000);
},function() {
$(this).find('.badges_hover_state').fadeOut(500);
});
});
</script>
I have tried to use stop(), delay() also but didn't get success. At last I tried to do with time interval but now my code has stopped working.

you could use this jquery script:
var myTimeout;
$('#div').mouseenter(function() {
myTimeout = setTimeout(function() {
//Do stuff
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
});
See the DEMO

Was able to solve this issue by adding window in front of variable name.
var myTimeout;
$('.div').mouseenter(function() {
window.el = $(this);
myTimeout = setTimeout(function() {
el.css("width","200px");
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
el.css("width","100px");
});

Fade in content on mouse over and hide on mouse out

I want #first to visibility:hidden normally and when mouse over it fades in and on mouse out it fades out.
EDIT
Fiddle : https://jsfiddle.net/vsdLk90s/1/
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").css('opacity', '1');
}, 400);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css('opacity', '0', 'visibility', 'hidden');
}
});

When multiple properties are to be defined, you are supposed to set them using a map.
.css({
'opacity': '0',
'visibility': 'hidden'
});
A better approach would be is to have a class with visibility:hidden set to #first, and toggle class based on the conditions.. Something in these lines.
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").removeClass('hidden').css('opacity', '1');
}, 400);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css({
'opacity': '0'
}).addClass('hidden');
}
});
Check Fiddle

May or may not be your issue, but I believe you need to replace the following lines:
$("#first").css('opacity', '1');
and
$("#first").css('opacity', '0', 'visibility', 'hidden');
need to become:
$("#first").css({'opacity': '1'});
and
$("#first").css({'opacity': '0', 'visibility': 'hidden'});
You will likely also need to 'toggle back on' visibility upon hover over like so:
$("#first").css({'visibility': 'visible', 'opacity', '1'});
Reference for using '.css' in JQuery: https://api.jquery.com/css/
TL;DR: Rather than separating the property and the desired value with a comma, you need to use a colon (:) and you need to enclose the .css part in {}
EDIT:
If you want the div to not be displayed upon page load, then only be displayed upon hover over add the following code to your stylesheet:
#first {
visibility:hidden;
}

run animation then remove element

I am tring to run a simple animation then remove the div since it lies over some buttons so you can not click them after the animation.
JS
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000 );
I tried doing this to remove the element after the animation but it removes it before.
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000 ).remove();

Remove in animate function's callback:
$(".intro").eq(0).delay(800).animate({opacity: 0}, 1000, function() {
$(this).remove()
});
Alternatively, add complete function in option object:
$(".intro").eq(0).delay(800).animate({opacity: 0}, {duration: 1000, complete: function() {$(this).remove();}});
You can add more options to it, easing for example. Check the API doc

You can use complete callback to call once the animation is complete :
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000, function() {
$(this).remove();
});
Working Demo

Use the complete callback
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000, function() { $(this).remove(); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="intro">Hello</div>

Step option is not fired in toggle method

I was trying to create a sliding menu, using toggle() method but needed to call a function (that was interacting with div height) while sliding into view. for this, I've used the step option (as seen in documentation) to call this function has soon has sliding starts to occur. I did many tests, and it seems that this option is not working with toggle().
I've tried to use animate() with the same call and its working perfectly...?
I've made a simple fiddle here ( JSFiddle ) to illustrate the problem.
I've tried it in the last version of IE and Chrome with version 1.11.0 of jQuery
// This is for toggle method
$(document).on("click", "#toggle", function(){
$("#menu").toggle({effect: "slide", direction: "left", width: "show", step: function(){
if ($("#menu").hasClass("open")){ //***** THIS IS NEVER EXECUTED
$("#menu").removeClass("open");
$(this).css("background-color", "red");
} else{
$("#menu").addClass("open");
$("#menu").css("background-color", "green");
}
}
}) ;
});

Your code in the fiddle is not correctly enclosed in parens (step is in another couple of {}); so the option are not passed correctly to the toggle function.
Code:
// This is for toggle method
$(document).on("click", "#toggle", function(){
$("#menu").toggle({effect: "slide", direction: "left", width: "show", step: function(){
if ($("#menu").hasClass("open")){ //***** THIS IS NEVER EXECUTED
$("#menu").removeClass("open");
$(this).css("background-color", "red");
} else{
$("#menu").addClass("open");
$("#menu").css("background-color", "green");
}
}
}) ;
});
Demo: http://jsfiddle.net/IrvinDominin/QzyEU/

SlideUp() function issue

After using animate() to exact height for div, closing div with slideUp() function. But there is one problem: slideUp() leaves inline height (that created animate() function on the fly) as is. It doesn't remove it after function execution. Is there any other way to do it?
For opening
$(minreg_link).click(function () {
if(ftr_form_cntr.is(':visible')){
if(minreg_div.is(':visible')){
return
}
ftr_form_cntr.find("div").fadeOut();
ftr_form_cntr.stop(true, true).animate({
height:"100"
},1000);
minreg_div.fadeIn(1000);
return;
}
ftr_form_cntr.show().stop(true, true).animate({
height:"100"
},1000);
minreg_div.fadeIn(1000);
});
for closing
$(closer_link).click(function () {
ftr_form_cntr.stop(true, true).slideUp(1000).find("div").fadeOut(1000);
$(closer_div).hide(1000);
})

ftr_form_cntr.stop(true, true).slideUp(1000, function(){
ftr_form_cntr.height(0);
}).find("div").fadeOut(1000);