jQuery背景图像动画答案

【问题标题】：jQuery background-image animationjQuery背景图像动画
【发布时间】：2011-01-08 13:42:10
【问题描述】：

如何在 jQuery 中的两个 PNG 图像之间制作动画？这可能吗？

当您在一种颜色到另一种颜色之间转换时，类似于 CSS 3 转换，但我需要一个图像到图像的转换。

【问题讨论】：

标签： jquery image background jquery-animate

【解决方案1】：

查看 Jack Moore 的这个插件，名为 jQuery Blend。

编辑：Opps 两张图片，抱歉。那么this plugin呢？

好的，如果您对插件不满意，那么试试这个。我发了demo here。

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();
})

【讨论】：

它不会在两个图像之间混合。它在纯色图层下方有一个图像，用于制作此“混合”动画。
我添加了一些代码......它与 Jordan 描述的差不多。
谢谢，它确实很有用。我想知道我现在是否应该走这条路并使用这种骇人听闻的方法来实现结果，或者只是等待官方的 CSS/jQuery 实现。
“官方”是什么意思？我提供的代码如何hackish？
我想“官方”实际上是指一个完整的 jQuery 插件，看起来更接近 $("selector").animateBackgrounds({action: 'switch',backgrounds: ['bg1. png','bg2.png','bg3.png'],effect: 'dissolve'}) 不太可能很快建立，因为我想这是一个相当不寻常的请求。至于“hackish”，我实际上同意他的观点，即这段代码不像大多数 jQuery 那样具有正常的干净外观，但这主要是因为很多功能必须手动编码，而不是使用已经存在的 jQuery功能。

【解决方案2】：

这可能会有所帮助：http://snook.ca/archives/javascript/jquery-bg-image-animations/

【讨论】：

它不会在两张图片之间制作动画，它所做的只是将一张图片移到另一张图片上。

【解决方案3】：

当您说“在两个图像之间制作动画”时，您的意思是您希望它们彼此淡入淡出吗？

我认为您需要做的基本上是创建两个浮动在主要内容下方的 div（使用 z-index），然后在它们之间淡入淡出：

放置图像 B（隐藏）在图像 A 后面（例如，通过将图像 B 的 z-index 设置为 10 并且图像 A z-index 为 20)
使用 .show() 显示图像 B [它仍将隐藏在 A 后面]
使用 .fadeOut() 淡出图像 A

重复 1-3 开关 A 和 B

如果您希望此动画持续播放，您可以使用 window.setInterval() 每隔一段时间运行一次代码。您可以有一个存储 A 或 B 的变量 current_bg 来跟踪您应该以哪种方式进行切换。

【讨论】：

好的。你认为将来会有 jQuery 实现或 CSS 实现允许图像到图像的动画吗？我可以等待它......或者现在就尝试实现它。