Простая анимация jQuery - PullRequest
Новая
       31

Простая анимация jQuery

1 голос
/ 11 августа 2011

Я отправил похожий вопрос, но не получил ответа.

У меня есть сайт jQuery Mobile, и мне нужна простая анимация в заголовке.

Смотрите мой JSfiddle здесь: http://jsfiddle.net/motocomdigital/twGHC/39/

У меня в заголовке есть логотип width:284px; height:58px;, прозрачный GIF размером 1 пиксель, который заменяется фоновым изображением.

Мое фоновое изображение содержит два слайда, на которых мне нужно постепенно исчезать.

Мне нужно, чтобы логотип циклически изменялся между этими двумя правилами CSS на моем изображении: 

div#header-logo a img {
    background-position: top;
}

и 

div#header-logo a img {
    background-position: bottom;
}

Я думаю, что свойство jquery css равно { backgroundPosition, 'bottom' } и { backgroundPosition, 'top' }

Каждый слайд может отображаться за 2 секунды до цикла.

Может кто-нибудь сказать мне, если это возможно, просто используя jQuery Mobile? и не нужно вводить новый плагин. Попытка сохранить это как можно более легким с помощью функции.

Любая помощь будет потрясающей, спасибо!

Мой HTML 

<div id="header-logo">

     <a href="#home" data-direction="reverse">
          <img src="x.gif" alt="" style="width:284px;height:58px;" />
     </a>    

</div>

Мой CSS 

div#header-logo {
    bottom: 0;
    position: relative;
    margin: 14px auto 0;
    padding: 0;
    width: 282px;
    height: 73px;
}

div#header-logo a img {
    width: 284px;
    height: 58px;
    background-image: url('http://www.freeimagehosting.net/newuploads/85137.png');
    background-size: 100% 200%;
    background-position: top;
    background-color: red;
}

Смотрите мой JSfiddle здесь, если вы хотите экспериментировать ... http://jsfiddle.net/motocomdigital/twGHC/39/

ОБНОВЛЕНИЕ: Первая идея, кажется, работает хорошо, спасибо Энди! Смотрите здесь .. http://jsfiddle.net/motocomdigital/twGHC/40/

Может ли он стать легче?

1 Ответ

0 голосов
/ 11 августа 2011

Как насчет позиционирования клона изображения с установленным клоном background-position: bottom, а затем с интервалом в 2 секунды до .animate() opacity каждого изображения?Не может быть самым чистым способом сделать это, но добавление этого кода в вашу скрипку работает для меня в Chrome 14 без каких-либо других изменений CSS или HTML. 

var anchor = $('div#header-logo a');
var img = anchor.find('img');
var position = img.position();
var bottom = img.clone();
bottom.css({position:'absolute',top:position.top,backgroundPosition:'bottom','opacity':0});
$('div#header-logo a').append(bottom);

var cycleHeader = setInterval(function(){
    img.animate({'opacity':img.css('opacity') == 0 ? 1 : 0});
    bottom.animate({'opacity':bottom.css('opacity') == 0 ? 1 : 0});
}, 2000);
...