jQuery動畫，隱藏到特定位置

Question

我是jQuery的新手，並且對hide()函數有疑問。 是否可以將盒子隱藏到某個位置？

我創建了一個快速的jsfiddle，希望它能演示我的意思。 我將一個綠色框隨機放置在大紅色框的后面，希望使其看起來像大紅色框縮小並消失在綠色框中。

我嘗試使用Google進行搜索，但是對此卻有些措手不及，所以我希望這里的人能給我一些提示。

這是我到目前為止嘗試過的

// jQuery
$('.close_this').click(function () {
    $('#hide_box').hide(1000);
});

// CSS
#hide_to_this {
    background:green;
    width:100px;
    height:100px;
    position:absolute;
    top:300px;
    left:500px;
}
#hide_box {
    background:red;
    width:1000px;
    height:1000px;
    position:absolute;
    top:0;
}

// HTML
<div id='hide_to_this'></div>
<div id='hide_box'><a href='#' class='close_this'>Close</a></div>

jsFiddle

Answer 1

希望這是您要尋找的。 如您所見，為了將元素隱藏到某個位置，您可以使用animate()方法

// HTML
<div id='hide_to_this'></div>
<div id='hide_box'><a href='#' class='close_this'>Close</a></div>

// CSS
#hide_to_this {
    background:green;
    width:100px;
    height:100px;
    position:absolute;
    top:250px;
    left:400px;
}
#hide_box {
    background:red;
    width:250px;
    height:250px;
    position:absolute;
    top:0;
}

// jQuery
$(".close_this").click(function() {
    o = $('#hide_to_this').offset();
    w =  $('#hide_to_this').width();
    h =  $('#hide_to_this').height();  
    $("#hide_box").animate({
        opacity: 0.1,
        width: 0,
        height: 0,  
        left: o.left + w / 2,
        top: o.top + h / 2 
    }, 1000, function() {
        console.log('Done!');
    });
});

您可以將#hidebox的width和height #hidebox為等於#hide_to_this元素； 您可以將速度更改為快於或慢於1秒的時間

工作jsFiddle

Answer 2

我認為這是您需要的代碼：

$('.close_this').click(function () {
var position = $("#hide_to_this").position();
$('#hide_box').animate({left:position.left,top:position.top,
                        width:100, height:100},'slow',
                       function(){
                            $('#hide_box').hide();
                       });
 });