【问题标题】:Fade from image A to image B, including text?从图像 A 淡入到图像 B,包括文本?
【发布时间】:2012-08-25 20:08:55
【问题描述】:

所以我发现了这篇关于使用 javascript(使用不透明度,适用于 Mozilla、Opera 和 IE)在图像之间淡入淡出的精彩文章:http://www.cryer.co.uk/resources/javascript/script19_fade_image.htm#self

我想知道,我可以对文本做同样的事情吗?我的意思是,如果两个图像中都有一些文本,并且我希望淡入淡出与文本同时发生?

谢谢

【问题讨论】:

  • 是的,你可以。我还应该注意到,jQuery 将这种行为封装到一个非常方便的包中,这意味着您可以对所有浏览器使用相同的代码。如果您可以选择,我建议您检查一下。
  • 当您说“图像中有一些文字”时,您的意思是文字是图像的一部分,还是您的意思是图像附近有一个单独的对象是文字?
  • 这个问题似乎很奇怪.. 你试过在文本上使用完全相同的方法吗?
  • jfriend00:如果文字是图片的一部分,我的问题就没有任何意义

标签: javascript css image opacity


【解决方案1】:

这是一个如何使用 JQuery 在两个图像和文本之间淡入淡出的示例:

http://jsfiddle.net/Tr2LA/

单击图像开始动画。它的工作原理是使用 JQuery 淡出一个 div,同时淡入另一个。每个 div 包含一个图像和文本。

$('#fadeOut').click(function() {

  $('#fadeOut').fadeOut('slow');

  $('#fadeIn').fadeIn('slow');

});

【讨论】:

  • 更好(来回淡化、文本居中、填充、更清晰的代码):jsfiddle.net/mnfyz/2
  • 这太棒了,感谢 D.Strout 和 Greg! jsfiddle 会保留这个模型多久?
  • 不客气 :) 据此,JSFiddle 将永远托管这些示例:stackoverflow.com/a/8191278/1010138。顺便说一句,不错的代码更新,D. Strout。
猜你喜欢
  • 2019-08-27
  • 1970-01-01
  • 1970-01-01
  • 2013-04-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-15
  • 2017-06-01
相关资源
最近更新 更多