CODEWITHSUNDEEP
jquery
cusejuice
cusejuice

Reputation: 10691

FadeIn element with .before Jquery

How do I fade in an element after using jquery's .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>

Upvotes: 1

Views: 2173

Answers (3)

j08691
j08691

Reputation: 207916

Add this line: $('.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.

Upvotes: 1

Cranio
Cranio

Reputation: 9847

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

The new class is unnecessary. You already know that the first row is the new one (and you would have to remove the class upon subsequent insertions).

Upvotes: 1

LOLapalooza
LOLapalooza

Reputation: 2082

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

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

Upvotes: 5

Related Questions