div 요소의 클래스를 다른 요소로 변경

Question

그래서 링크를 클릭하면 패널이 측면 w에서 벗어나는 사이트를 만들려고합니다. 자세한 내용은 jQuery 및 CSS를 사용하십시오.

패널은 위치가 절대적인 div이며 화면 바깥으로 이동됩니다. 링크를 클릭하면 패널이 제 위치로 이동하게됩니다. 기본적으로 div의 클래스를 변경하여 절대 위치 지정을 사용하여 div를 화면으로 옮기고 싶습니다.

div를 조작하여 자신의 클래스를 변경하는 방법을 알고 있지만 div를 제어 할 수 있도록 별도의 div에 연결하는 방법을 모릅니다. 또한 어떤 기능을 추가하여 그냥 나타나지 않고 추가 할 수 있는지 잘 모르겠습니다 ...

저는 jQuery를 처음 접했기 때문에 누구나 도움을받을 수 있습니다.

Answer 1

가장 쉬운 방법은 위치 또는 여백/패딩을 움직이는 것입니다.

당신은 방아쇠 역할을하는 객체에 훅 :

$("#trigger").click(function(){ 
}); 

그리고 클릭, 다시 위치 요소 .animate()

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#trigger").click(function(){ 
     // Adjust the effect (2000 miliseconds) 
     $("#moreinfo").animate({ opacity: 1.0, left: 0 }, 2000); 
    }); 
}); 
</script> 

그리고 어딘가에 CSS, 우리는 처음에 숨기를 사용하여 요소는 화면에서 멀리 떨어져 있습니다.

#moreinfo { 
position: absolute; 
top: 5px; 
left: -2000px; // You can adjust based upon the actual dimensions of the object 
} 

Answer 2

당신은 jQuery의 애니메이션 기능을 사용해야합니다 또는 당신이 슬라이딩 패널 제어 할 DIV에 onclick= 이벤트로 부착이 같은과 일반 자바 스크립트에서 할 단순히 수 :

function slide(slider, data, step, callback) { 
    slider.style.left = data+"px"; 
    data += step; 
    if(dataIn <= data && data <= dataOut) { 
    setTimeout(function() { slide(slider,data,step,callback) }, 15); 
    } else if(callback && (typeof(callback) == 'function')) { 
    callback();} 
} 

을 당신이 경우

function click() { 
    var data = 0; 
    var step = 15; 
    var slider = document.GetElementById("sliderDiv"); 
    slide(slider,data,step); 
} 

을 그리고 미래에, 당신은 지금 (콜백을 사용할 수 있습니다) :

그리고이 방법은, 당신은 단순히 당신이 슬라이드를 클릭합니다 사업부의 이벤트를 설정할 수 있습니다 비동기 적으로 실행해야합니다. :)