CODEWITHSUNDEEP
jquery
Svedr
Svedr

Reputation: 589

Animating dynamically generated content (Jquery)

I have an issue I am not sure how to solve. I am dynamically adding content with the click of a button. Its quite a long content wrapper. I am trying to fade in this dynamically generated content. Is it ok if I am using jQuery for this or should I go with CSS? Any ideas why the code below does not work?

$( "#new-inquiry-item" ).click(function() {
    $('.added-inquiry').prepend(inquiryString);
    $(this).fadeIn ('slow');
});

Thank you for your help.

Upvotes: 0

Views: 49

Answers (1)

user1189882
user1189882

Reputation:

Okay, if the button is static, you can use the click function you have, however, $(this) inside the click function is referring to the button - and you can't fade in a button if you expect the user to be able to click it (as the button has to be visible to click).

From what you said, it sounds like you want either the .added-inquiry element to fade in, or just the new content (assuming it is assigned a class).

Here's the former: http://jsfiddle.net/48naqays/

inquiryString = "Here's my dynamically generated string<br>";
$( "#new-inquiry-item" ).click(function() {
    $('.added-inquiry').prepend(inquiryString).stop().hide().fadeIn('slow');
});

And the latter: http://jsfiddle.net/pboqc5f2/

inquiryString = "<div class='new-inquiry'>Here's my dynamically generated string</div>";
$( "#new-inquiry-item" ).click(function() {
    $('.added-inquiry').prepend(inquiryString)
    $('.new-inquiry').not(':visible').fadeIn('slow');
});

This second one also has a CSS class to hide the dynamic content upon its creation, so it can fade in:

.new-inquiry{
    display:none;
}

Upvotes: 1

Related Questions