jquery - animate toggle and background -
i try to:
- click animate div logo
- click again div logo , should go initial position
- click background , should go initial position (if not already)
i set var check position of div, not work , not know if right direction.
here play: http://jsfiddle.net/xnmz3/
html:
<div id="logo"></div> <div id="background"></div>
css:
body{margin:0;} #logo { position:fixed; bottom:-40px;left: 5%; width:70px; height:80px; background:blue; cursor:pointer; z-index:1; } #background { position: absolute; width: 100%; height: 100%; background:yellow; z-index:0; }
jquery:
$(function(){ var hidden = $("#logo").css("bottom","-40" + "px"); $("#logo").click(function(event) { event.stoppropagation(); if (hidden) { $("#logo").animate({bottom: "0"}, 500); } else { $("#logo").stop.animate({bottom: "-40"}, 500); } }); $("#background").click(function() { if (!hidden) { $("#logo").animate({bottom: "-40"}, 500); } }); })
try this:
$(function () { var hidden = true; var $logo = $("#logo"); $logo.click(function (event) { event.stoppropagation(); var bottom = hidden ? "0" : "-40"; $(this).stop().animate({ bottom: bottom }, 500); hidden = !hidden; }); $("#background").click(function () { if (!hidden) { $logo.animate({ bottom: "-40" }, 500, function () { hidden = !hidden; }); } }); });
Comments
Post a Comment