jQuery фоновая анимация - PullRequest
Новая
       8

jQuery фоновая анимация

4 голосов
/ 23 января 2010

Как анимировать между двумя изображениями PNG в jQuery? Возможно ли это?

Что-то вроде перехода CSS 3 при переходе от одного цвета к другому, но мне нужен переход между изображениями.

Ответы [ 3 ]

3 голосов
/ 23 января 2010

Проверьте этот плагин от Jack Moore под названием jQuery Blend .

Редактировать: Оппс два изображения, извините. Как насчет этого плагина тогда?

Хорошо, если вы не довольны плагином, попробуйте это. Я разместил демо здесь .

CSS / HTML 

<style type="text/css">
.wrap {
 margin: 50px auto;
 width: 200px;
 height: 200px;
 background: #555;
 position: relative;
}
.display1, .display2 {
 position: absolute;
 top: 0;
 left: 0;
}
</style>
<div class="wrap">
 <div class="display1"></div>
 <div class="display2"></div>
</div>

Сценарий 

$(document).ready(function(){
 var bkgImgs = ([
  ['http://i50.tinypic.com/2iiz9cm.gif', 86, 86],
  ['http://i45.tinypic.com/dop26e.png', 128, 128],
  ['http://i48.tinypic.com/xcosnq.png', 64, 64]
 ]);
 var delay = 5000;
 var transition = 1000;

 var i = 0;
 var l = bkgImgs.length-1;
 imgs = function(x){
  return {
   background: 'url(' + bkgImgs[x][0] + ') no-repeat center center',
   width:      bkgImgs[x][1],
   height:     bkgImgs[x][2],
   left:       $('.wrap').width()/2 - bkgImgs[x][1]/2,
   top:        $('.wrap').height()/2 - bkgImgs[x][2]/2
  }
 }
 next = function(){
  var oldpic = imgs(i);
  i++;
  if (i > l) i = 0;
  var newpic = imgs(i);
  $('.display2').css(oldpic).show();
  $('.display1').hide().css(newpic).fadeIn(transition);
  $('.display2').fadeOut(transition);
  setTimeout( function(){ next() }, delay );
 }
 next();
})
2 голосов
/ 23 января 2010
1 голос
/ 23 января 2010

Когда вы говорите «Анимировать между двумя изображениями», вы имеете в виду, что хотите, чтобы они соединились друг с другом?

Я думаю, вам нужно создать два элемента div, которые плавают под основным содержимым (используя z-index), а затем постепенно переходят между ними:

  1. положить изображение B (скрыто) за изображением А (скажем, установка z-индекса изображения B на 10 и изображение z z-index до 20)

  2. показ изображения B с использованием .show () [оно все равно будет скрыто за A]

  3. Исчезновение изображения A с использованием .fadeOut ()

Повторите 1-3 переключения A и B

Если вы хотите, чтобы эта анимация продолжалась, вы можете использовать window.setInterval () для частого запуска кода. У вас может быть переменная current_bg, которая хранит либо A, либо B, чтобы отслеживать, каким образом вы должны выполнить переключение.

...