Text fade in fade out effect using jquery

Jquery fade in fade out effect. Recently I have used this trick it's very simple. Implement this concept to your website welcome page. Implement this code for your site to attract more visitors. Here I have explained some other fade elements.

Live Demo Download

jQuery Fading Methods

With jQuery you can fade an element in and out of visibility. fade in hidden the attribute jQuery has the following fade methods:

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

fadeIn - This method used to hidden the element. fadeIn callback parameter is a function to be executed after the fading completes.

fadeOut() - This method used to visible the hidden element. It can take the slow and fast effect based on milliseconds.

fadeToggle() - This method toggles between the fadeIn() and fadeOut(), If the first element hide it will visible during the time. If the second element visible it will make hidden.

fadeTo() - This method similar like fadeToggle effect but this method allows fading to a given opacity.

Html

<html>
    <body>
    <div>
      <p><span>Welcome to mostlikers blog</span>
      <span class="first_text">Text fade in fade out using jquery</span>
      </p>
    </div>
</body>
</html>

Jquery

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  setInterval(function(){
      fade();
    },2000);
  function fade(){
      $("span").fadeToggle(300);
    }
});
</script>

Css

.first_text {
    display:none;
    color:#1e1e1e;
    font: normal bold 28px Verdana, Geneva, sans-serif;

}
span {
    position: absolute;
    color:blue;
    font: normal bold 28px Verdana, Geneva, sans-serif;
}

Have a Question? Share your query by writing a comment below.

"Failure will never overtake me if my determination to succeed is strong enough. "

- A. P. J. Abdul Kalam

Menu Link

17 November, 2015