Question

Simple question and easy points for a kind soul who helps a novice.

I’m using WordPress, jQuery is properly loading in the header.

I’ve got a ul with a 1600x2000px bg-image. I’d like to change the background-position by -500px to create a sliding effect like an ad board in a shopping mall. If it’s the :last-child, instead of -500, it will +1500 (roll back to the top) but I think I can handle the if/else on my own, just having trouble getting .animate() going.

HTML

<ul id="indexSlides">
    <li id="messageBox">
    </li>
    <li id="slideA">
      <p>Some Text</p>
    </li>
    <li id="slideB">
      <p>Some more Text</p>
    </li>
    <li id="slideC">
      <p>Some different Text</p>
    </li>
    <li id="slideD">
      <p>Some Text</p>
    </li>
</ul>

CSS:

ul#indexSlides {
    height: 500px;
    background: url('images/slides.jpg') 0 0 no-repeat transparent;
}

ul#indexSlides > li > p {
    display: none;
}

jQuery:

<script type="text/javascript">

// function to slide the background of the list

jQuery(document).ready(function($) {

setInterval(function() {
    $("#indexSlides").animate({
        top: '-=500',
    } , {
        duration: 1500,
    }
}, 5000),
});

</script>

Thanks in advance for any help.

Answer 1

You’re missing a paren, there’s an extra comma or 2, and a comma instead of a semi-colon:

jQuery(document).ready(function($) {
   setInterval(function() { 
    $("#indexSlides").animate({
            top: '-=500'
        } , {
            duration: 1500
        });
    }, 5000);
});

EDIT:
Here’s an example using 2 divs: http://jsfiddle.net/fehays/yXLv3/1/

The inner div is the height of the entire background image. The outer div has a height of one single slide and a overflow:hidden so you only see one.