FadeIn元素與.query之前的問題

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 example。