2012-03-29 3 views
0

이 같은 뭔가를 :는 웹킷 전환 "숨기기"(표시 : 없음) 이후 사업부

<style> 
    #submenu { 
     background-color: #eee; 
     height:200px; 
    width:400px; 
    opacity: 1; 
     -webkit-transition: all 1s ease-in-out; 
    } 
    .doSomething { 
     background-color: #fc3; 
    -webkit-transform: rotate(360deg); 
    visibility:collapse; 
    } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
</head> 


<body> 
    <div id="submenu">`enter code here` 
     <div style="background-color:black;width:50;height:50"></div> 
    </div> 
    <div style="background-color:yellow;height:250"></div> 
    <script type="text/javascript"> 
    $(function(){ 
     $('#submenu').addClass('doSomething'); 
    }); 
</script> 
</body> 

첫번째 사업부 내가 그와 아래 (노란색 사업부를 숨길 애니메이션 완료되면 문제는 하나) 그의 자리를 차지할 수 있습니다. 속성 디스플레이를 넣으려고했는데 애니메이션이 작동하지 않습니다.

도움이 매우 감사합니다.

답변

1

코드가 이미 웹킷과 관련되어 있으므로 webkitTransitionEnd 이벤트를 사용하여 애니메이션이 끝나는 시점을 알 수 있습니다. 해당 이벤트의 핸들러에서 첫 번째 div를 숨기고 두 번째 div를 표시 할 수 있습니다. 이것을 설명하기 위해 빠른 jsFiddle을 작성했습니다.