Question

我是jQuery的新手，对hide()函数有疑问。是否可以将盒子隐藏到某个位置？

我创建了一个快速的jsfiddle，我希望它能说明我的意思。我把一个绿色的盒子放在一个随机的位置，在大红色的盒子后面，并且想让它看起来像大红色的盒子缩小并在绿色盒子里消失。

我试过谷歌搜索它，但我对它的言论有点失落，所以我希望有人在这里给我一个提示。

这是我到目前为止所尝试的

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

您可以将width的{{1}}和height更改为#hidebox元素;你可以将速度改为比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();
                       });
 });

jQuery动画，隐藏到某个位置

2 个答案: