使用jQuery移動div

Question

我想知道如何將div（box2）移動到屏幕右側並在用戶將鼠標懸停在另一個div（box1）上時消失。我知道我們必須使用Jquery。截至目前，我知道如何通過使用切換功能使box2消失，但我不知道如何使用動畫功能將其移動到右側然後消失。任何幫助將不勝感激。

Answer 1

你在問怎麼使用$ .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。

前面的演示中使用的（簡單）HTML：

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

而CSS：

#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; 
} 

要做到同樣的，一旦#box1元素徘徊懸停：

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

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

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

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' }); 
         });