使用另一个图像淡入/淡出背景图像/淡出其他元素
Posted
技术标签:
【中文标题】使用另一个图像淡入/淡出背景图像/淡出其他元素【英文标题】:Fade In/Out Background Image with Another Image / fade out other elements 【发布时间】:2013-05-09 08:29:10 【问题描述】:我在淡入/淡出某些元素时遇到问题。我需要有几个 div,淡入新背景,以及悬停时的文本。当我将鼠标悬停在那个元素上时,我还需要让其他 div 淡出一些。
如果我将鼠标悬停在一个元素上,我可以淡出其他元素,但我无法弄清楚其余的问题。
我只希望那些特定的 div 受到影响,因为我在页面上有其他 div(id 和类)。
这是我的小提琴: http://jsfiddle.net/deelite/SnvMr/2/
我的 jquery:
$('div').hover(function()
$('div').not($(this)).stop().fadeTo(500, 0.33);
, function()
$('div').stop().fadeTo(500, 1);
);
我不知道该怎么做。
【问题讨论】:
【参考方案1】:只需使用.not(this)
; .not($(this))
不正确。您还有其他几个错误。您可以将另一个类(例如,.effect
)添加到您想要应用效果的div
s。
html:
<div class="effect one"><p>me</p></div>
<div class="effect two"><p>have</p></div>
<div class="effect three"><p>fun</p></div>
jQuery:
$('.effect').hover(
function()
$('.effect').not($(this)).stop().fadeTo(500, 0.33);
, function()
$('.effect').stop().fadeTo(500, 1);
);
小提琴:http://jsfiddle.net/SnvMr/5/
【讨论】:
抱歉,必须更新 jquery。新的小提琴在我的帖子里。 谢谢,但是如何更改 bakcgrounds 并在悬停时显示文本? 谢谢。这几乎是我的想法。我实际上希望背景图像淡入/淡出,因为如果我使用 class:hover 方法会有轻微的闪烁。 @Keoki 在 Stack Overflow 上查看另一个问题:***.com/questions/2999562/… 我读了一遍,和我要找的不一样。【参考方案2】:感谢 Mooseman 对代码的帮助,我更进一步,关于如何通过将 div(包含新背景)插入到包含第一个背景的 div 中来进行背景“更改”,以及让新的 div 淡入/淡出旧的。第二个 div 必须与原始 div 具有相同的“尺寸”,除非您要获得 bg 必须相互偏移的效果。
您可以在此处查看更新的代码: http://jsfiddle.net/deelite/SnvMr/12/
JS代码:
$('.effect').hover(
function ()
$('.effect').not(this).stop().fadeTo(500, 0.33);
$(this).find('div').stop().fadeTo(500, 1);
, function ()
$('.effect').stop().fadeTo(500, 1);
$('.effect div').stop().fadeTo(500, 0);
);
谢谢!
【讨论】:
以上是关于使用另一个图像淡入/淡出背景图像/淡出其他元素的主要内容,如果未能解决你的问题,请参考以下文章
Cocoa - UIControlStateNormal 和 UIControlStateDisabled 背景图像之间的 UIButton 淡入淡出过渡