2011-08-01 3 views
1

http://jsfiddle.net/E6cUF/JQuery와 메뉴에서 슬라이드와

아이디어는 페이지가 녹색 상자 뒤에서 왼쪽 회색 상자 슬라이드를로드 완료 후, 가능하다면 조금 바운스이다 반사.

편집 : 그것은

나타나는 회색 하나가 너무 오른쪽에서 왼쪽으로 녹색 하나의 슬라이드 뒤에해야하지만 jsfiddle와 니콜라 http://jsfiddle.net/RBD3K/

에서 주석의 변경 사람들을 기반으로 새 버전을 만든

+0

당신이 그것을하는 동안 폭을 변경할 수있는 권한을 하시겠습니까? –

답변

1

당신이 생각하는 두 가지를 놓치고있다 :

1) jquery UI를로드해야합니다.

$('#test').click(function() { 
    var $marginLefty = $('.left'); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
     $marginLefty.outerWidth() : 
     0 
    }).effect("bounce", { times:5 }, 300); 
    }); 

업데이트 바이올린 : http://jsfiddle.net/nicolapeluchetti/E6cUF/4/

+0

감사합니다. 편집 된 첫 번째 게시를 참조하십시오! – Writecoder

+0

이게 뭔가요? http://jsfiddle.net/nicolapeluchetti/RBD3K/1/ –

+0

정확하게 그와 비슷하지만, 왼쪽면에는 약간의 공간이 있고 페이지가로드 된 후입니다. 나 자신을 약간 시험해 보았다.로드 후 바운스되지만 회색 div는 왼쪽에 있어야하고 회색과 녹색 div 사이에 10px 공간이 있어야한다. http://jsfiddle.net/RBD3K/5/ 대단히 감사합니다! – Writecoder

0

이 시도

2)는 애니메이션 효과 후 바운스 효과를 넣어. 이것이 당신이 원하는 것인지 확실하지 않습니다.

$('#test').click(function() { 
    var $marginLefty = $('.left'); 
    var $marginRight = $('.right'); 
    $marginLefty.animate({ 
     marginLeft: 0 
    },{ duration: 200, queue: false }); 
    $marginRight.animate({ 
     marginLeft: 100 
    },{ duration: 200, queue: false }); 
    }); 

업데이트 : 업데이트 된 바이올린에서, CSS로 됐지 position :absolute;z-index:1000에 대한 추가

http://jsfiddle.net/E6cUF/11/