Jquery метод анимации на фоне - PullRequest
Новая
       5

Jquery метод анимации на фоне

0 голосов
/ 26 октября 2011

Простой вопрос и легкие вопросы для доброй души, которая помогает новичку.

Я использую Wordpress, jQuery правильно загружается в шапке.

У меня есть ul с bg-изображением 1600x2000 пикселей. Я хотел бы изменить background-position на -500px, чтобы создать скользящий эффект, такой как доска объявлений в торговом центре. Если это: last-child, а не -500, он будет +1500 (откат к вершине), но я думаю, что могу справиться с if / else самостоятельно, просто не могу запустить .animate (). *

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>

Заранее спасибо за любую помощь.

Ответы [ 2 ]

1 голос
/ 26 октября 2011

Вам не хватает парена, есть лишняя запятая или 2, и запятая вместо точки с запятой: 

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

РЕДАКТИРОВАТЬ: Вот пример использования 2-х дел: http://jsfiddle.net/fehays/yXLv3/1/

Внутренний div - это высота всего фонового изображения.Внешний div имеет высоту одного слайда и переполнение: скрыто, поэтому вы видите только один.

1 голос
/ 26 октября 2011

Полагаю, вам придется использовать плагин jQuery для анимации фоновых положений .

Вот оно, без плагина не работает: http://jsfiddle.net/pLx2H/

Вот оно, работа с плагином: http://jsfiddle.net/pLx2H/1/

См. Также jquery animate background background .

...