[jQuery] one div, multiple clicks
Hi!
I have one div (.masterpiece) and now i can open it by click and close
it by move mouse out.
How I can make it so that it also close when i click it again (when
it's enlarged)?
$(".masterpiece").bind("mouseenter",function(){
$(".shade", this)
.animate({ opacity: "0.4" }, {duration: 500, queue: false});
}).bind("click",function(){
$(this)
.animate({ height: "450px" }, {duration: 500, easing:
"easeOutBounce", queue: false})
.css('zIndex', '10');
$(".shade", this)
.animate({ opacity: "0" }, {duration: 500, queue: false});
$("#bigshade")
.animate({ opacity: "0.8" }, {duration: 500, queue: false})
.css('zIndex', '5');
}).bind("mouseleave",function(){
$(this)
.animate({ height: "80px" }, {duration: 500, queue: false})
.css('zIndex', '1');
$(".shade", this)
.animate({ opacity: "0.8" }, {duration: 500, queue: false});
$("#bigshade")
.animate({ opacity: "0" }, {duration: 500, queue: false})
.css('zIndex', '0');
});
Thanks!