jQuery动画，隐藏到特定位置

Question

I'm kinda new to jQuery and have a question about the hide() function. Is it possible to hide a box to a certain position?

I created a quick jsfiddle, which I hope it demonstrates what I mean. I placed a green box in a random position, behind the big red box, and want to make it look like the big red box scales down and vanishes in the green box.

I tried googling it, but I'm a little lost on words for it, so I hope someone in here could give me a hint.

This is what I tried so far

// 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

I hope this is what your're looking for. As you can see, in order to hide an element to a certain position you could use animate() method

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

You may change the width and height of #hidebox to be equal to #hide_to_this element; you can change the speed to something faster or slower than 1 sec

Working jsFiddle

Answer 2

I think this is the code you need:

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