CODEWITHSUNDEEP
javascriptjquery
Bonny Mahajan
Bonny Mahajan

Reputation: 81

Understanding jQuery slider functions

  $("#text_slider div:gt(0)").hide();

 setInterval(function() { 
$("#text_slider div:first")
  .fadeOut(500).next().fadeIn(500).end().appendTo("#text_slider");

},5000);

My html code is

<body>
<div id="text_slider">
<div><p>First Text</p></div>
<div><p>Second Text</p></div>
<div><p>Third Text</p></div>
</div>
<script src="C:\Users\bonny\Documents\samples sites\jquery\jquery.js">      </script>
 <script src="1.js"></script>
 </body>

My css

 #text_slider{
width:600px;
height:300px;
margin:100px auto;
box-shadow:0 0 5px 5px #000;
}
#text_slider div {
position:absolute;

}
 #text_slider p{
margin:20px;
font-size:30px;

 }

I am building a text slider using jquery and saw the above jquery code being successfully used in a tutorial but I am having difficulty in understanding how it works.Here's what I know: The first statement hides all the text(all 3 sub-divs) to prevent them from stacking on top of each other at the beginning. At first the fadeOut function moves on "first text" div and then moves to its sibling(I think ?) the "Second Text " div , and "second text" div fades in 500ms .Then the end() redirects the property to the container div.( But I am lost as to how the rest of the program works after that . What does Append do in the above code.

Please correct me if my explanation above is wrong somewhere.I am still new.

Upvotes: 2

Views: 99

Answers (2)

stark
stark

Reputation: 2256

$("#text_slider div:gt(0)").hide();

This line of code hides all div's found inside #text_slider except for the first div. Check the reference to the :gt() selector here : https://api.jquery.com/gt-selector/

   setInterval(function() {
     $("#text_slider div:first")
       .fadeOut(500).next().fadeIn(500).end().appendTo("#text_slider");
   }, 5000);

Once the other divs are hidden, the code displays just the first div (using the :first selector - https://api.jquery.com/first-selector/) and this setInterval function then takes over to be executed at every 5 second intervals. The first div inside the #text_slider is found and faded out , then using the next() function, the following div which was earlier hidden is then found and fadedIn and finally, the div that has been faded out is appended to the #text_slider div thus reordering the three divs inside the text_slider div. So that at all times the #text_slider has html containing all three child divs.

Check this working fiddle here : fiddle

Upvotes: 1

AdmSteck
AdmSteck

Reputation: 1761

$("#text_slider div:gt(0)").hide(); - Hides all div's that are children of the "text_slider" div, except for the first. That the :gt(0) part.

setInterval(function, 5000) says run the code inside the function every 5 seconds.

$("#text_slider div:first") Finds the first div that is a child of "text_slider"

.fadeOut(500) Fades it out in 1/2 second.

.next() moves to the next sibling.

.fadeIn(500) fades in that sibling in 1/2 second

.end() goes back to the originally selected element in this chain, or the first child div.

.appendTo("#text_slider"); appends the first child div to the end, basically re-ordering it and making it the last child. The others move up in order.

Upvotes: 3

Related Questions