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;             });         }     }); }); 

fiddle demo


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -