CODEWITHSUNDEEP
javascriptjqueryhtml
Paul Nyondo
Paul Nyondo

Reputation: 2274

How to insert html using the insertAfter method along with fadeIn effect so that the html just fades In

I tried inserting some html and at the same time giving it an effect of fadeIn. This is how I attempted to achieve it, but it failed:

<html>
<head>
<title></title>
<script src="Jquery.js">
</script>
</head>
<body>
<style type="text/css">
.container{
    background-color: red;
}
</style>
<div class="container"><img src="001.jpg" alt="sasuke"></div>

<script type="text/javascript">
(function(){
$("<p>lorem Ipsum blah blah </p>").insertAfter("img").fadeIn(1500);

})();
</script>
</body>
</html>

Upvotes: 2

Views: 4224

Answers (4)

user3009558
user3009558

Reputation: 1

Try this;

(function(){
   $("<p>Fade in text </p>").hide().fadeIn(1500).insertAfter("img");
})();

Fiddle

Upvotes: 0

CrazyBS
CrazyBS

Reputation: 626

Create the element hidden when you add it to the DOM, then fade it in:

(function(){
  var paragraph = $("<p>");
  paragraph.text("lorem Ipsum blah blah");
  paragraph.hide();
  paragraph.insertAfter("img");
  paragraph.fadeIn(1500);
})();

Upvotes: 10

Zevi Sternlicht
Zevi Sternlicht

Reputation: 5399

Try this:

 (function(){
     $("<p style="display:none;">lorem Ipsum blah blah </p>").insertAfter("img").fadeIn(1500);
 })();

Upvotes: 0

adeneo
adeneo

Reputation: 318252

You probably have to hide it to be able to fade it in:

$(function(){
    $('<p />', {text: 'lorem Ipsum blah blah '}).hide().fadeIn(1500).insertAfter("img");
});

FIDDLE

Upvotes: 4

Related Questions