jquery - 使用 jQuery 移动 div

Question

我想知道如何将 div(box2) 一直移动到屏幕右侧并在用户将鼠标悬停在另一个 div(box1) 上时消失。我知道我们必须使用 Jquery。到目前为止，我知道如何使用切换功能使 box2 消失，但我不确定如何使用 animate 功能将其向右移动然后消失。任何帮助将不胜感激。

Answer 1

一种在屏幕上滑动元素，然后将其淡出的方法：

    // 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 小提琴演示。

上面的演示使用（简单）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 小提琴演示。

以上使用以下 HTML：

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

参考：

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

Answer 2

您在问如何使用 $.animate()？

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

基本上...

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

插入你的选择器，你应该知道怎么做。

Animate 有两个主要参数，但我添加了第三个参数，即“缓动”。

第一个是包含 CSS 更改的对象字面量。

第二个是以毫秒为单位的动画完成时间。

第三个是缓动，它允许您在曲线上制作动画。默认为“线性”，看起来很僵硬。

你的问题似乎并不存在。如果您只是询问一般信息，请先尝试在搜索引擎中查找。

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