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.

How do I add content to my div?

I got a little JS function here: http://jsfiddle.net/9UzNq/7/
When you click the bar, it expands to 300px from it's height.
I tried applying a div for content in there, but couldn't figure it out.
var open = false;
$(document).ready(function () {
$('#title').click(function () {
open = !open;
$('#ABCD').animate({
height: open ? "300" : "0"
}, 700);
if (open) $('#title').addClass('glow');
else $('#title').removeClass('glow');
});
});
The content div should open at the same time with the 'wrapit'.

You just put the parent div #ABCD height to 0px, but the child has already content in it, so it's still displayed.
Read again this documentation, especially the examples part. You can use toggle for example
$('#ABCD').animate({
height: "toggle"
}, 700);

You can try like this, Just empty/fill your content div's text during runtime and make use of the call back function of animate.
var open = false;
$(document).ready(function () {
$('#title').click(function () {
open = !open;
$('#ABCD').empty();
$('#ABCD').animate({
height: open ? "300" : "0"
}, 700,function(){
if (open){ $('#title').addClass('glow');
$('#ABCD').text("Some content that shouldn't be showed before the div 'ABCD' is open");
}
else{ $('#title').removeClass('glow'); }
});
});
});
DEMO

What i did was set the visibility of #ABCD to hidden. When you click you title, use jQuery to set the visibility back to visible.
css
#ABCD {
width:100%;
z-index:2;
height: 0px;
visibility:hidden;
}
jQuery
$(document).ready(function () {
$('#title').click(function () {
open = !open;
$('#ABCD').animate({ height: open ? "300" : "0" }, 700);
if (open){
$('#title').addClass('glow');
$('#ABCD').css('visibility','visible');
}
else{
$('#title').removeClass('glow');
$('#ABCD').css('visibility','hidden');
}
});
});

mouseenter + mouseleave / hover on two different div

Hi ive got this piece of code to deal with mouseenter and leave on 2 superposed div
When a user mouseenter the main div the sub div is showed, and if the user get in the subdiv the subdiv must remain, but if the user get out the maindiv and is not in the subdiv the subdiv must be hidden, try with my jsfiddle http://jsfiddle.net/rgkcp/
but the timer is not run in my piece of code
$(".bulleHome").each(function () {
var subDiv = $(this).find(".mupHome");
$(this).mouseenter(function () {
$(this).find(".mupHome").css("visibility", "visible");
$(this).find(".mupHome").animate({
marginTop: '-23px'
});
});
$(this, subDiv).mouseleave(function () {
// this is not run
timer = setTimeout(function () {
$(this).find(".mupHome").css("visibility", "hidden");
$(this).find(".mupHome").animate({
marginTop: '+23px'
})
}, 50);
});
$(this, subDiv).mouseenter(function () {
clearTimeout(timer);
});
});
And the html :
<div class="bulleHome ombreV">
<a href="http://preprod.mupiz.com/georges-barret" style="font-size:0.7em;text-decoration:none;" pid="13200">
<img src="http://www.mupiz.com/images/img-membres/images_4958C.jpg" alt="Georges profil" height="100px"><br>
</a>
<div class="mupHome" style="visibility: visible; margin-top: -23px;">
<img src="http://www.mupiz.com/images/mupitR.png" alt="Mup It!" id="bouton-ajout-ami13200" onclick="alert('ok')" style="cursor: pointer;"><span class="tMupHome">Mup it!</span>
</div>
</div>
And the linked css :
.mupHome{position:absolute;color:#fff;background: rgb(0, 0, 0) transparent;background: rgba(0, 0, 0, 0.8);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";width:100px;visibility:hidden;height:19px;}
.tMupHome{position:relative;top:-8px;left:5px}
Any ideas ?
Js Fiddle : http://jsfiddle.net/rgkcp/
Thanks!

I suggest you to create a var X and set it to false. Then if your mouse go over the SubDiv , you set it to true :
$(".mupHome").mouseenter(function () {
ondiv = true;
});
After this, you just have to verify if the var X is set to true when you leave the first div, if yes, you do nothing. if it still set to false, you hide the SubDiv :
$(this, subDiv).mouseleave(function () {
if(ondiv === false)
{
$(".mupHome").animate({
marginTop: '23px'
},function() {
$(".mupHome").css("visibility", "hidden");
});
}
});
Here's the jsFiddle.

I am guessing that you want the div to move back out of the way and disappear when the mouse leaves the sub div. If that is the case this should work fine. If it is not we could definitely use some clarification. You were changing the visibility before the animation, so the animation would not be visible. There were a couple missing quotes in the fiddle as well.
$(".bulleHome").each(function () {
var subDiv = $(this).find(".mupHome");
$(this).mouseenter(function () {
$(this).find(".mupHome").css("visibility", "visible");
$(this).find(".mupHome").animate({
marginTop: '-23px'
});
});
});
// Added Code
$('div.mupHome').on({
mouseleave: function() {
$(this).animate({marginTop: '+0px'}, 1000, function(){$(this).css('visibility', 'hidden');});}
});
Also on the mupHome div the style was not closed out correctly, not sure if this is true in your real code or not
<div class="mupHome" style="visibility: visible;>
Should be
<div class="mupHome" style="visibility: visible;">

Animate and image up and down in jQuery

I'm trying to animate and image up and then down with jQuery.
It should behave like this:
When the page loads it shows 50% of the image. If someone clicks on the image it then animates the div up the page. If the user click again it moves back down the page.
html
<div id="slidebottom" class="slide">
<div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
</div>
jQuery
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
});
});
How can I reverse the animation after click two? At the moment every time I click, the container moves up.

You can try using the .toggle() method, which takes two functions and alternates between executing each one of them on click:
$(document).ready(function(){
$('.try').toggle(function() {
$(".inner").animate({top: '-=100px'}, 2000);
}, function() {
$(".inner").animate({top: '+=100px'}, 2000);
});
});
However, I personally would use a class and CSS3 Transitions.

Try this example. Also note that in order to use the top css property you should either position: relatve; or position: absolute the .inner div.
var clicked = false
$('.try').click(function () {
if (clicked == true) {
$(".inner").animate({
top: '0px'
}, 2000);
clicked = false;
} else {
$(".inner").animate({
top: '-100px'
}, 2000);
clicked = true;
}
});​

Just put another code line underneath the first and it will animate them in order
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
$(".inner").animate({
top: '+=100px'
}, 2000);
});
});

Make a DIV reveal upwards onClick

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.

Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
​
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>

$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.

Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});