Wednesday, 17 July 2013

Fade-in read more in JavaScript


fade-inFade in read more text is a very simple trick in JavaScript. It is very amazing and helpful trick, if you want to know that what is fade in read more text so below is a demo of this.
Demo:

My name is Muhammad Aseel.


Hope you understand what is fade-in read more in JavaScript. If you want to add this trick to your blog so just follow the below few steps.

Add fade in read more in JavaScript.

  • Go to your blog dashboard.
  • Then below any post and below any page paste the below code.
 <script type="text/JavaScript" src="http://yourJavaScript.com/60172417532/jquery-fade-in.js"></script>
    <script type="text/JavaScript">
    $(document).ready(function() {
      
        $("span.spoiler").hide();
      
         $('<a class="reveal">Read more&gt;&gt;</a> ').insertBefore('span.spoiler');
  
        $("a.reveal").click(function(){
            $(this).parents("p").children("span.spoiler").fadeIn(2500);
            $(this).parents("p").children("a.reveal").fadeOut(600);
        });
  
    });
    </script>
<style>
a.reveal { cursor:pointer;}
</style>
  • And then if you want to make any paragraph short just paste the below code before where you want read more.
<span class="spoiler">
  •  And when you end your paragraph just paste the below code just after the paragraph.
</span>
Note:  
when you are going to publish your article then click to HTML and add <p> tag before paragraph is starting and add </p> tag after </span> tag either it will not work.

For Example:

<p>This is a paragraph and now I want read more tag so I paste here <span class="spoiler"> and this paragraph will show when you click read more okay now my paragraph is finished so I add </span><p>.

Last words:

Hope you like this article and hope you will also share this article with your friends. If you having any trouble in adding fade in read more so don't worry just tell me your problem by your comment.

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

No comments:

Post a Comment

Subscribe this blog and get daily this blog articles to your email.