2013-05-14 5 views
0

:
이 - 사업부 로고
애니메이션을 클릭 - 다시 DIV 로고를 클릭을하고 초기 위치
로 이동합니다 - 배경에 클릭이 초기에 가야한다 위치가 아직없는 경우애니메이션의 전환 및 배경

div를 설정하여 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); 
     }  
    }); 
}) 
+0

당신은 pageload에'hidden'을 설정하는? – adeneo

답변

0

이 시도 : 여기

은 재생하는 것입니다

항상 뭔가를 포함하고 truthy 수 있도록
$(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

+0

로고를 클릭 한 다음 배경과 로고를 다시 클릭하면 애니메이션이되도록 두 번 클릭해야합니다. – Nrc

+0

고정 : http://jsfiddle.net/xNMZ3/4/ –

+0

나는 작동하지만 숨김 =! 숨김을 이해하지 못합니다. 이거 설명해 주시겠습니까? – Nrc