CODEWITHSUNDEEP
javascriptjquerycssevents
Jerry S.
Jerry S.

Reputation: 91

Jquery FADE in/out CONTENT

I needed a bit of help

My problem is I need a Fade in Fade out function that keeps repeating my Div Content about every 7 seconds. Content 1 will appear, then Content 2 will fade in, then Content 3 fade in after content 2 fades out, and it keeps repeating.

I wrote a script but it seems to not working properly. What am I doing wrong? How can I make this more efficient? Any guide will be helpful.

THE HTML inside of a UL wrapped in LIs

<ul>
     <li class=”thecontent”> CONTENT 1</li>
     <li class=”thecontent”> CONTENT 2</li>
     <li class=”thecontent” > CONTENT 3</li>
     <li class=”thecontent” > CONTENT 4</li>
  <ul>

THE CSS

ul li.thecontent{ display:none;}

THE JQUERY

  $(document).load(function(){
     function fadeMyContent() {
     $(".content:hidden:first").fadeIn(700).delay(1000).fadeOut(700,
 function() {    $(this).appendTo($(this).parent());   
 fadeMyContent();    });
       }
     fadeMyContent();

Upvotes: 0

Views: 1766

Answers (3)

kapitanluffy
kapitanluffy

Reputation: 1267

luckily this is what i am working on right now lol

$(document).ready(function(){
    $('.clicked').click(function(){
        $(this).next('.nextSibling').toggle('slow');
    }); 
});

Upvotes: 0

KryptoniteDove
KryptoniteDove

Reputation: 1268

Are you calling the correct class?

.content in the jQuery code and "thecontent" in the markup. How exactly is it not working properly? Is the timer not working is it fading too fast, not showing anything at all?

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Here you go. In your code the class name in the selector is wrong and also the double quotes enclosing the class names in the markup is not correct.

Working demo

$(function(){
     function fadeMyContent() {

         $(".thecontent:first").fadeIn(700).delay(1000).fadeOut(700,
             function() {    
                     $(this).appendTo($(this).parent());   
                     fadeMyContent();    
             });
      }
     fadeMyContent();
});

Mark up

<ul>
     <li class='thecontent'> CONTENT 1</li>
     <li class='thecontent'> CONTENT 2</li>
     <li class='thecontent'> CONTENT 3</li>
     <li class='thecontent'> CONTENT 4</li>
<ul

Upvotes: 4

Related Questions