jquery - 删除具有点击功能的类时出现 CSS 过渡效果问题

Question

我有一个包含两个类的 Div。 <强> FIDDLE

HTML

<div class="plug slide-down">   
</div>

这个 div 最初位于页面底部。但是当我点击 div 时，我添加了点击功能来删除 .slide-down 和 div 在顶部移动。

JS

$('.plug').click(function(){
    $(this).removeClass("slide-down");
});

到目前为止它工作正常，但是当我单击 div 时它会快速移动到顶部。 我想通过一些滑动效果将这个 div 移动到顶部。我尝试添加 CSS 转换但不知何故不起作用。我需要做什么才能使这个 div 从下到上移动并产生一些滑动效果？

任何帮助将不胜感激。

Answer 1

尝试查看 jQuery.animate。你可以做类似的事情:

$('.plug').on('click', function() {
    var $this = $(this);
    $this.animate({ top: 0, height: 300 }, function() {
        $this.removeClass('slide-down');
    });
});

Here is the fiddle