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