JQuery와 슬라이드 효과와 부동 요소

Question

:

즉 다음 슬라이드 DIV 다음 슬라이딩 사업부 및 측면 DIV. 이 코드를 사용

<div id="container"> 
<div id="side" style="float:right;" onclick="$('#slidable').toggle('slide');">…</div> 
<div id="slidable" style="float:right;">…</div> 
</div> 

내 문제는 측면 DIV에만 슬라이딩 DIV가 미끄러 완료되면 움직이기 시작한다는 것입니다. 두 div를 동시에 애니메이션으로 만들려면 어떻게해야합니까?

Answer 1

http://jsfiddle.net/azmeuk/QgD5Y/7/ 내가 함께 div에 class '숨기기'을 추가 한

<div id="container"> 
     <div id="slidable"class="hide">Foobar</div> 
     <div id="side">+</div> 
    </div> 

이 코드

HTML에서보세요 :

당신은 여기에 전체 예를 볼 수 있습니다 id = "slidable" 페이지를로드 할 때 숨길 수 있습니다. 원하지 않으면 제거 할 수 있습니다.

CSS 문제 이런 종류의 JQuery와 UI를 사용하여

#side{ 
    float:right; 
    width:50px; 
    height:50px; 
    background:#BBB; 
} 

.hide{ 
    display:none; 
} 

#slidable{ 
    float:right; 
    height:50px; 
    background:#888; 
    width:200px; 
} 

JQuery와

jQuery(document).ready(function($) { 
    $("#side").click(function() { 
    $('#slidable').animate({width: 'toggle'}); 
     }); 
    }) 

JSFiddle Demo

Answer 2

잔인한입니다 (만 변화는 전 클래스가 hide 추가됩니다) 나를 위해 ... 일부 CSS를

#slidable.open { 
    margin-right: -200px 
} 

를 추가하려면이 demo

처럼 대신 toggleClass() ...

를 사용하고 jQuery를 코드를 변경하는아니라, 우리가 여기 아직, 내가 무엇을 제안 할 수있는 것은

에 여기

jQuery(document).ready(function($) { 
    $("#side").click(function() { 
     $("#slidable").toggleClass("open", 500); 
     }); 
    }); 

Answer 3

이 대신하려고 :

jQuery(document).ready(function($) { 
    $("#side").click(function() { 
     $("#slidable").animate({width: 'toggle'}); 
     }); 
    });