одушевленные тумблер и фон

Question

Я стараюсь:
- Нажмите, чтобы оживить Div логотип
- Нажмите снова Div логотип и он должен перейти в исходное положение
- Нажмите на задний план, и он должен пойти в первоначальное (если он еще не был)

Я установил var, чтобы проверить, что такое позиция div, но он не работает, и я не знаю, правильное ли оно.

Вот играть: 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); 
     }  
    }); 
}) 

Answer 1

Попробуйте это:

$(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