将div滑动到div的顶部

时间:2013-06-13 14:52:13

标签: jquery html css

我如何将div滑动到页面顶部,如果div是5个div中的数字3,它应该转到div的顶部并将div下面的其他div推到顶部

我找到的最接近的结果是:http://biostall.com/demos/swap-and-reorder-divs-smoothly-using-jquery/

唯一的问题是,它与另一个div交换位置,我想让它滑到所有div的顶部

1 个答案:

答案 0 :(得分:-1)

DEMO

<强> HTML

Click on a box
<img />
<img />
<img />
<img />
<img />

<强> JS / JQ

var y = 100;
$('img').each(function () {
    $(this).css("top", y + "px");
    $(this).css("background-color", "rgb(0,90," + y + ")");
    y += 55;
});


$('img').click(function (e) {

    $(e.target).animate({
        top: "100"
    });

    $(e.target).siblings().each(function () {
        if ($(this).position().top < $(e.target).position().top) {
            $(this).animate({
                top: "+=55"
            });
        }
    });

});

<强> CSS

img {
    height:50px;
    width:50px;
    position:absolute;
    left:20px;
    cursor:pointer;
}