jQuery를 사용하여 div 이동하기

Question

div를 이동하여 (box2) 화면 오른쪽으로 이동하고 사용자가 다른 div (box1)를 가리키면 사라지는 방법을 알고 싶습니다. Jquery를 사용해야한다는 것을 알고 있습니다. 현재로서는 box2를 토글 기능을 사용하여 사라지게 만드는 방법을 알고 있지만 애니메이션 기능을 사용하여 오른쪽으로 이동 한 다음 사라지는 방법은 확실하지 않습니다. 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

$ .animate() 사용법을 묻는 중입니까? 기본적으로

http://api.jquery.com/animate/

... 당신의 선택에

$(document).ready() 
{ 
    $(selector).animate(
     { 
      "backgroundColor" : "red" 
     }, 500, "swing"); 
} 

플러그, 해당 작업을 수행하는 방법을 알고 있어야합니다.

Animate에는 두 가지 주요한 논점이 있지만 세 번째는 "완화"입니다.

첫 번째는 CSS 변경 사항이 포함 된 개체 리터럴입니다.

두 번째는 애니메이션이 완료되는 데 걸리는 시간 (밀리 초)입니다.

세 번째는 부드럽게하기 때문에 커브에서 애니메이션을 적용 할 수 있습니다. 기본값은 "선형"이며 딱딱하게 보입니다.

귀하의 질문은 실제로 존재하지 않는 것 같습니다. 방금 일반 정보를 요구하는 경우 먼저 검색 엔진에서 찾으십시오. 화면 전체 엘리먼트를 슬라이딩하고 그것을 페이딩

Answer 2

편도

// get the widths of the window (or the parent of the element to move): 
var winWidth = $(window).width(), 

    // get the width of the element itself: 
    demoWidth = $('#demo').width(), 

    // find out how far to move the element: 
    delta = winWidth - demoWidth, 

    // the time-frame over which to animate: 
    duration = 1500; 

// bind the animate method:  
$('#demo').animate({ 
    // move the element the distance held by the 'delta' variable: 
    'left': delta 
// animate for the duration defined by 'duration': 
}, duration, 

// callback function, to occur once first stage of the animation has completed:  
function() { 
    // binding the fadeOut() method: 
    $(this).fadeOut(duration); 
}); 

JS Fiddle demo.

<div id="demo"></div> 

그리고 CSS : 다음 #box1 요소가 공중 선회 오버되면

#demo { 
    width: 5em; 
    height: 5em; 
    background-color: #f00; 
    /* to move an element, using the 'left' property, 
     the 'position' must be set to a value other than 'static' (the default): 
    */ 
    position: relative; 
} 

는, 동일한 작업을 수행하려면 :

var winWidth = $(window).width(), 
    demoWidth = $('#box2').width(), 
    delta = winWidth - demoWidth, 
    duration = 1500; 

$('#box1').mouseenter(function() { 
    $('#box2').animate({ 
     'left': delta 
    }, duration, 

    function() { 
     $(this).fadeOut(duration); 
    }); 
}); 

는 위의 데모는 (단순) HTML을 사용하여

JS Fiddle demo. 다음 HTML을 사용하여 위의

:

<div id="box1"></div> 
<div id="box2"></div> 

참고 :

• animate().
• fadeOut().
• mouseenter().
• width().

Answer 3

여러 가지 방법이 있지만 호버에서 hover() 및 animate()를 사용할 수 있습니다.

<div class='slide-right'>howdy</div> 
<div class='slide-right'>doody</div> 

슬라이딩 오른쪽을 수행하는 데 사용하는 속성은 전적으로 귀하에게 달려 있습니다. 여기서는 예로서 왼쪽 여백을 움직입니다. 이것은 레이아웃에 영향을 미치므로 대신 left과 절대 위치 지정을 사용해보십시오. 뷰 안팎으로 슬라이드 할 때 불투명도를 선택적으로 애니메이트 할 수 있습니다.

$('.slide-right').hover(function() 
         { 
          $(this).siblings('.slide-right').animate({ 'margin-left': '+=50' }); 
         },  
         function() 
         { 
          $(this).siblings('.slide-right').animate({ 'margin-left': '-=50' }); 
         });