如何将类的应用程序设置为div的动画

Question

我想知道如何将样式应用到div，然后通过动画慢慢删除它？看看这里的小提琴链接，这显然不起作用，但我如何修复它呢？

http://jsfiddle.net/csaltyj/PzUdA/

编辑：对不起，意味着淡出背景，而不是div本身。

Answer 1

你可以这样做：

$('#press-me').click(function() {
    $('<p>New content.</p>').appendTo('#content-box').addClass('newobj-hilite').animate({opacity: '0'}, 500);
});

Jsfiddle：http://jsfiddle.net/naveed_ahmad/PzUdA/2/

还有一些好东西可供阅读和学习：

http://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques

http://designreviver.com/tutorials/20-easy-to-learn-jquery-animation-tutorials/

Answer 2

或者您只需删除.animate()并替换为：

即可

.fadeOut("slow");

根据您的评论进行编辑，您只想删除课程而不是内容：

只需包含jQueryUI并使用.toggleClass()，如 working jsFiddle demo 所示。

jQuery的：

$('#press-me').click(function() {

    $('<p>New content.</p>')
        .appendTo('#content-box')
        .addClass('newobj-hilite')
        .toggleClass('newobj-hilite', 2000);

});

Answer 3

您可以使用jQuery UI。

$('#press-me').click(function() {
    $('<p class="effect">New content.</p>').appendTo('#content-box')
        .addClass('newobj-hilite', 1000, callback)
});

function callback() {
    $(".effect").removeClass("newobj-hilite", 1000);
}

查看更新的fiddle。