Develop Reference

what is the best way to return the orginal style when mouseleave jquery?

I use mouseenter to input a new html. I face a challenge that I need to return the original style when mouse leave? When mouseleave, I need to remove the new html and use the original html What is the best way to do that?
var eye_disease1 = $('#eye_disease1');
eye_disease1.mouseenter(function () {
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
// what should I put here to return the original
});

Get the original HTML of eye_disease1 before changing and after mouse leave update HTML.
var eye_disease1 = $('#eye_disease1'),
diseaseHtml = '';
eye_disease1.mouseenter(function () {
if (!diseaseHtml) {
diseaseHtml = eye_disease1.html();
}
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
diseaseHtml = '';
eye_disease1.html(diseaseHtml);
});

You can all use the addClass
`$("selector").mouseenter(function(){
$(this).addClass("active");
})
$("selector").mouseleave(function(){
$(this).removeClass("active");
})`

var eye_disease1=$('#eye_disease1');
var eye_disease1_html;
eye_disease1.hover(
function() {
eye_disease_1_html = eye_disease1.html();
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>')
.fadeOut(0)
.css('border','none')
.fadeIn(400);
}, function() {
eye_disease1.find('span.show_li, span.show_li_2')
.fadeOut(400)
.delay(400)
.html(eye_disease1_html)
.fadeIn(0);
}
);
But yeah I would prefer to have all the content inside (original, and the hovered content) there the whole time.
HTML:
<div id="eye_disease1">
<div class="original-content">
Original Content
</div>
<div class="hovered-content">
<span class="show_li">symptoms</span>
<span class="show_li_2">diseases</span>
</div>
</div>
CSS:
.hovered-content {
display: none;
}
.hovered {
border: none;
}
JS:
$('#eye_disease1').hover(
function() {
$(this).addClass("hovered");
$(this).find(".original-content").fadeOut();
$(this).find(".hovered-content").fadeIn();
}, function() {
$(this).removeClass("hovered");
$(this).find(".hovered-content").fadeOut();
$(this).find(".original-content").fadeIn();
}
);
You can see it here: https://jsfiddle.net/waga7Lu1/3/
The transition effect is a bit clumsy but I'm not really sure what you're after.

Show/Hide using toggle jQuery

jQuery Script
This code works, But Is it possible to add 'options' inside the slideToggle method so that I toggle 'Show/Hide' text?
$(function() {
var container = $('div.container p'),
button = $('div#click');
container.hide();
button.on('click', function() {
if (button.text() == 'Show') {
button.text('Hide');
} else {
button.text('Show');
}
$(this).next().slideToggle(300);
});
});
http://jsfiddle.net/sachq/mt3duxzk/1/

You can go ahead and give this a try. You may also change the "complete" option to "start" if you want the callback to fire as soon as you click the button.
DEMO: HERE'S A FIDDLE
var container = $('div.container p');
var button = $('div#click');
container.hide();
button.on('click', function(){
container.slideToggle({
duration: 200,
complete: function(){
var txt = (button.text() === 'Show') ? "Hide" : "Show";
button.text(txt);
}
});
});

I can suggest better approach. The idea is that you should not hardcode your button texts into javascript code. It makes code very obtrusive and tightly coupled, because if you decide to change the text from "Show" to "Show more" you will have to modify javascript code as well. Instead you can have both labels in place but show only one at a time:
<div id="click"><span class="show">Show</span><span class="hide">Hide</span></div>
Javascript:
button.on('click', function () {
button.toggleClass('hide');
$(this).next().slideToggle(300);
});
and CSS:
div#click > span {
display: none;
}
div#click .show {
display: inline-block;
}
div#click.hide .hide {
display: inline-block;
}
div#click.hide .show {
display: none;
}
UPD. Apparently someone disagrees with me. But it is easy to see that the benefits of slightly increased amount of code are bigger then it might look at first. Approach described above is much more flexible then comparing text strings. Not to mention it also allows advanced styling of the buttons with images and other elements which could be problematic with hardcoded strings.
Demo: http://jsfiddle.net/mt3duxzk/3/

You can't do that, but you can simplify things to ternary operator.
button.text(function(_, txt){
return txt == "Show" ? "Hide" : "Show"
}).next().slideToggle(300);

alternatives to jquery animate?

On hover I want my div to scroll down.
I know i can use the .animate({left: 0}, "slow"); but this doesnt go down but what else does jquery have to offer?
Here is my jsfiddle: http://jsfiddle.net/WZvPk/4/
hover over the sectors box and you will see the "view project" move down. I need it to move down in a slow fashion similar to http://www.jeremymartin.name/examples/kwicks.php?example=3
Then need the opacity to be so my image is darker.
edit: slide down wont work with this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").css("margin-top", "-5px");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);

You probably want jQuery slideDown, see: http://api.jquery.com/slideDown/
Edit:
So something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.css("display", "block")
.css("margin-top", "-5px")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);
You could also, add a css class with the margin-top and display-block property, like:
.slideDown { display: block !important; margin-top: 5px !important; }
/* !important so they won't be overwritten..*/
Then you can do something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.addClass("slideDown")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);

What about css3 transitions? They are smooth and are starting to be widely supported.
Here's an example which doesn't use javascript at all.
Update : Another example that doesn't use opacity.

$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, "slow");
},
function () {
$(this).children(".sectorImage").children(".showme").css("display", "none").css("margin-top","-25px");
}
);​

​Now it works
$(".sectorGrid").hover(
function () {
$(".showme").css("margin-top", "-25px");
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, 'slow');
},
function(){
$(".showme").css("display", "none")
}
);
​
​

jQuery .animate() sets display:none, how to avoid?

I have the following code:
HTML:
<div id="clickme">
Click me :-)
</div>
<div id="info" style="background:red; width:100%; height:100px; margin-bottom:-100px; z-index:20; position:absolute; bottom:0px;">
Stay, damn!
</div>
JavaScript:
$('#clickme').click(function() {
$('#info').animate({
marginBottom: 'toggle'
},{
duration:500
});
});
It's also available at http://jsfiddle.net/DxnQJ/
Obviously, I want the #info DIV to appear/disappear whenever the #clickme DIV is clicked. It's working as intended, except that the #info DIV disappears after the animation due to jQuery setting its CSS display property to none.
How can I tell jQuery to stop hiding my DIV?

I would recommend using .slideToggle:
$('#clickme').click(function() {
$('#info').slideToggle(500);
});
Demo: http://jsfiddle.net/Daniel_Hug/DxnQJ/2

javascript code
$('#clickme').toggle(
function () {
$('#info').animate({
height:"0px"
}, 500);
},
function () {
$('#info').animate({
height:"100px"
}, 500);
});
http://jsfiddle.net/amkrtchyan/zymUK/2/

Replacing your click function with this works:
$('#clickme').click(function() {
var whichSetting = $('#info').css('marginBottom');
if(whichSetting == '-100px') {
whichSetting = '0px';
}
else {
whichSetting = '-100px';
}
$('#info').animate({
marginBottom: whichSetting
},{
duration:500
});
});

Cancel setTimeout if mouse is over div

I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)
This is the jquery code I wrote:
$(document).ready(function() {
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}
The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?

First, put B inside of A:
<div class="a">
AAA
<div class="b">
BBB
</div>
</div>
Then, abandon your javascript and make life easier with plain old css:
.b
{
display: none;
}
.a:hover .b
{
display: block;
}
Edit - Here's a live example using the CSS technique: http://jsfiddle.net/gilly3/sBwTa/1/
Edit - If you must use the JavaScript, just add clearTimeout(time) to show(). But, let's also simplify your code:
$(function()
{
var time = 0;
function show()
{
clearTimeout(time);
$("BBB").show(); // Existing jQuery that does $().css("display","block")
}
function hide()
{
time = setTimeout(function()
{
$("BBB").hide();
}, 200);
}
$("AAA,BBB").mouseenter(show).mouseleave(hide);
});

There are a few small problems with your code. The one which is biting your right now is that you aren't clearing BBB's timeout when you enter AAA. You can fix this by adding a clearTimeout to AAA's mouseover handler.
Secondly, it's safest to clear this kind of timeout before you set it each time, so that you don't have your timeout tracking overwritten if something unexpected happens. (It's always safe to clear a timeout, even if it's invalid or has already occurred.)
Lastly, though this is most likely only a problem in your example code, you're leaking time into the global object. ;-)
Try this instead:
$(document).ready(function() {
var time;
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
clearTimeout(time);
show();
});
$(this).mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}

Here's a script that works with meaningful function names that should make it easy to see what's going on. You have to cancel the hiding from mouseenter on both divs.
$(document).ready(function() {
var timerId, delay = 300;
var a = $("#A"),
b = $("#B");
function stopHide() {
clearTimeout(timerId);
}
function showTip() {
b.show();
}
function startHide() {
timerId = setTimeout(function() {
b.hide();
}, delay);
}
a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
b.mouseenter(stopHide).mouseleave(startHide);
});
div {
border: 2px dashed firebrick;
float: left;
font-size: 50pt;
font-weight: bold;
padding: 5px;
margin: 5px;
}
#B {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>
Previously at http://jsfiddle.net/92jbK/1/

You code is wrong :)
Try this:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#AAA, #BBB {
width:100px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="BBB">
BBB
</div>
<div id="AAA">
AAA
</div>
<script src="http://www.google.com/jsapi"></script>
<script>
//VISIBLE
function hide() {
$("#BBB").css({'display':'none'});
}
function show() {
$("#BBB").css({'display':'block'});
}
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
// NOT VISIBLE
// function hide() {
// $("#BBB").css({'display':'none'});
// }
// function show() {
// $("#BBB").css({'display':'block'});
// }
$(document).ready(function() {
var time;
$("#AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("#BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("#BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
});
</script>
</body>
</html>

one alternative is to use jquery's tooltip http://flowplayer.org/tools/tooltip/index.html
then you can just do for example:
$('#A').live(function() {
$(this).tooltip({
relative: true,
position: 'top center',
delay: 200,
effect: !$.browser.msie ? 'fade' : 'toggle',
fadeInSpeed: 100,
fadeOutSpeed: 50,
predelay: 500
});
});
and you just make div b of class tooltip

Is time declared outside all of this?
It is not in the same scope in the two functions you have it in above, so is not the same variable so the clearTimeout() call has no effect.
Declare it outside both with var time;, so that they refer to the same variable.