전환 사업부를 확장하고 슬라이드

Question

I에 유래에서 태어났다 자바 스크립트의 기존 조각을 변경하기 위해 찾고 있어요하지만 난 방법을 모른다 ...

$('.menuBtn').click(function(event) { 
value = $('.whole').css('right') === '100px' ? 0 : '100px'; 
    $('.whole').animate({ 
     right: value 
    }); 

이

가에 대한 링크입니다 왼쪽 JSFiddle : http://jsfiddle.net/bayron2304/Abs5H/1189/

나는 이미 너비와 배치면에서 약간 변경했다. 하지만 지금 내가 필요로하는 것은 파란색 div가 왼쪽으로 미끄러 져서 크기를 조정하고 그림자를 만드는 것입니다 (파란색 상자가 사용자쪽으로 오게됩니다. 일명 3 차원입니다.)? 애니메이션의

빠른 요약 :

• 클릭 상자> 상자 GET의 크고 그림자를 생성 (의 10 % 더 큰 가정 해 봅시다)>은 500ms 기다려야 다음에 대해> 슬라이드 왼쪽과 아래에 무엇을 알 수있다.

상자가 다시 클릭되면 전체 애니메이션이 뒤로부터 시작됩니다. 토글.

정말 필요하기 때문에 누군가 나를 도울 수 있기를 바랍니다. 감사!

Answer 1

$('.menuBtn').click(function(event) { 
    value = $('.whole').css('right') === '100px' ? 0 : '100px'; 
    $('.whole').addClass('scaleUp'); 
     $('.whole').delay(1000).animate({ 
      right: value 
     }); 
}); 

.scaleUp{ 
transition-duration:.5s; 
box-shadow:2px 2px 4px rgba(0,0,0,0.4); 
    transform:scale(1.2); 
}