Jquery Animation Method on Background

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.

You mind making a [jsfiddle](http://jsfiddle.net)? – Richard JP Le Guen Oct 26 '11 at 16:33 — Richard JP Le Guen, Oct 26 '11 at 16:33

score 1 · Answer 1 · edited May 23 '17 at 12:19

1

I believe you'll have to use the background-positions animation jQuery plugin.

Here it is, not working without the plugin: http://jsfiddle.net/pLx2H/

Here it is, working with the plugin: http://jsfiddle.net/pLx2H/1/

See also jquery animate background position.

edited May 23 '17 at 12:19

Community

1
1

answered Oct 26 '11 at 16:34

Richard JP Le Guen

28,364
7
89
119

I'd prefer not to use a plugin because it seems like it should be a simple task, and there are 4 or animations that I'm going to chain together with callbacks. This is the first one. According to the jQuery .animate() docs, you can use the method I'm trying to implement. – thegumba Oct 26 '11 at 16:36
JQuery doesn't have built-in support for animation of background position, so yes, you do need the plugin. – Nate B Oct 26 '11 at 16:54
Got it, thank you. I think I'll go with @fehays method. I'd like to use sprites to ensure that once the animation begins, all images are loaded. – thegumba Oct 26 '11 at 17:03

fehays · Accepted Answer · 2011-10-26T17:01:58.687

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.

edited Oct 26 '11 at 17:01

answered Oct 26 '11 at 16:41

fehays

3,147
1
24
43

I'm seeing the inline style changing the top position in Firebug now, but the bg-image is not moving. Do I need to absolutely position the list? – thegumba Oct 26 '11 at 16:46
No you have to do something else. I don't believe you can animate the background image position. I think you need another element "underneath" your ul that contains the background image. Then you can animate that. – fehays Oct 26 '11 at 16:51
See my edit. That might be an option for you. Also, the plugin mentioned by @Richard is a good solution. – fehays Oct 26 '11 at 17:02
So it should work if I wrap the ul in a containing div with fixed height and overflow hidden, make the lis the height of the containing div and have the background images, then animate the top of the ul? EDIT: should have refreshed before asking, your answer 3 mins ago was the answer to this question. – thegumba Oct 26 '11 at 17:05
Technically yes, but when you animate the
- s will also animate with it and you won't see them after the first move.
– fehays Oct 26 '11 at 17:09

Jquery Animation Method on Background

2 Answers2