4

jQueryで2つのPNG画像間をアニメーション化するにはどうすればよいですか？これは可能ですか？

ある色から別の色に移行するときのCSS3トランジションのようなものですが、画像から画像へのトランジションが必要です。

4

3 に答える 3

3

jQueryBlendと呼ばれるJackMooreによるこのプラグインをチェックしてください。

編集：2つの画像を表示します。ごめんなさい。では、このプラグインはどうですか？

プラグインに満足できない場合は、これを試してください。ここにデモを投稿しました。

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();
})
于 2010-01-23T15:15:10.800 に答える
2

これは役立つかもしれません：http ：//snook.ca/archives/javascript/jquery-bg-image-animations/

于 2010-01-23T14:34:35.627 に答える
1

「2つの画像の間でアニメーション化する」と言うとき、それらを互いにフェードインさせたいという意味ですか？

基本的に、メインコンテンツの下に浮かぶ2つのdivを作成し（z-indexを使用）、それらの間で次のようにフェードする必要があると思います。

  1. 画像B（非表示）を画像Aの後ろに配置します（たとえば、画像Bのz-indexを10に設定し、画像Aのz-indexを20に設定します）

  2. .show（）を使用して画像Bを表示する[まだAの後ろに隠れている]

  3. .fadeOut（）を使用して画像Aをフェードアウトする

1-3スイッチAとBを繰り返します

このアニメーションを継続させたい場合は、window.setInterval（）を使用してコードを頻繁に実行できます。AまたはBのいずれかを格納する変数current_bgを使用して、切り替えを行う方法を追跡することができます。

于 2010-01-23T15:57:15.463 に答える