jquery - 带有 .before Jquery 的 FadeIn 元素

Question

使用 jquery 的 .before 后如何淡入元素？

jQuery

$('.button').on("click", function(event){
   var html = '';
   html = '<div class="row new">Test</div>';

   $('.content .row:first').before(html);
});

HTML

<a class="button">Insert me and fade me</a>
<div class="content">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>

Answer 1

$(function() {
$('.button').on("click", function(event){
   var html = '';
   html = '<div class="row new">Test</div>';

   $('.content .row:first').before($(html).fadeIn());
});
});

Answer 2

$('.button').on("click", function(event){
   var html = '<div class="row">Test</div>';
   $('.content .row:first').before(html).prev().hide().fadeIn(1000);
});​

new上课是不必要的。您已经知道第一行是新行（并且您必须在后续插入时删除该类）。

Answer 3

添加这一行：$('.row.new:last').hide().fadeIn();

jQuery :

$('.button').on("click", function(event) {
    var html = '';
    html = '<div class="row new">Test</div>';
    $('.content .row:first').before(html);
    $('.row.new:first').hide().fadeIn();
});​

jsFiddle 示例。