CODEWITHSUNDEEP
jquery
geoNeo_
geoNeo_

Reputation: 103

Animation in jQuery displays wrong images first cycle?

I have been experimenting with a jquery script that I found on the following link:

http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

The running example does work, but if I run the code in my own VS 2010 project for some reason the first image seems to revert back onto itself.

What I mean is the following:

Here are the images in default.aspx page:

    <div id="slideshow">
       <div>
         <img src="Images/boating.gif" width="240px" height="240px">
       </div>
       <div>
        <img src="Images/Cat.gif" width="240px" height="240px">
       </div>
       <div>
        <img src="Images/catcute.jpg" width="240px" height="240px">
       </div>
       <div>
        <img src="Images/cutebird.jpg" width="240px" height="240px">
       </div>
    </div>

Here is the code in my Default.js file :

   $(document).ready(function(){ 

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

setInterval(function() { 
  $('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
},  3000); 

});

Here is the code in the style sheet file:

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;

}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Here is the code reference in my default.js file inside my default.aspx page:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Default.js" type="text/javascript"></script>
</asp:Content>

Thank you in advance and kind regards _geoNeo

Upvotes: 1

Views: 823

Answers (2)

Paul Oliver
Paul Oliver

Reputation: 7681

Wrap your code in a ready function:

    $(function() {

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

        setInterval(function() {
          $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  3000);

    });

Working jsFiddle at http://jsfiddle.net/P3fEp/

Upvotes: 1

coolguy
coolguy

Reputation: 7954

Wrap your entire code in 

$(document).ready(function(){

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

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

});

Upvotes: 0

Related Questions