jQuery:向上滑动一个元素并替换它

jQuery: Sliding up an element and replacing it

本文关键字:一个 元素 替换 jQuery      更新时间:2023-09-26

我正在尝试使用jQuery来制作它,这样当我点击一个元素时,它会向上滑动,并创建一个新的元素,该元素会向下滑动到它的位置。

我的代码在这里:http://jsfiddle.net/V4SVt/474/

$('.grab_button').click(function () {
    $(this).slideUp(function () {
        $(this).parent().append($('<span class=" grabbed">grabbed</span>').hide());
        $(this).parent().children('.grabbed').slideDown();
        $(this).remove();
    });
});

当我点击元素时,它会完美地滑出,并且创建了新的元素,但它不会向下滑动。它只是出现了。如果我隐藏该元素,然后通过WebKit控制台将其向下滑动,它将正确地设置动画。这里怎么了?

滑动内联元素存在问题,尤其是如果它们是动态插入的,并且没有位置、大小或其他任何东西。

试试这个:

$('.grab_button').click(function () {
    var assGrab = $('<span />', {'class':'grabbed', text:'grabbed', style:'display:inline-block;'});
    $(this).slideUp(function () {
        $(this).replaceWith(assGrab.hide());
        assGrab.slideDown()
    });
});

FIDDLE