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

添加以下行：$('.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 example

Answer 3

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

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

使用.before Jquery的FadeIn元素

3 个答案: