jQuery 悬停图像更改动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10039174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Hover image change animation
提问by Todd Davis
I have an IMG tag with a grayscale image. I hooked up a Hover() event in order to change the "src" to a color image on hover, and back to grayscale on mouse-out.
我有一个带有灰度图像的 IMG 标签。我连接了一个 Hover() 事件，以便在悬停时将“src”更改为彩色图像，并在鼠标移开时返回灰度。
This works just fine, however the change is abrupt. I'd like to add a slight fadeIn() to the effect so that the color appears to fadein and fadeout. I wrote the following which I thought would work, but doesn't. (The image changes, but there is no fade or delay to the effect). What am I doing wrong?
这工作得很好，但是变化是突然的。我想在效果中添加一个轻微的淡入（），使颜色看起来淡入淡出。我写了以下我认为可以工作的内容，但没有。（图像发生变化，但效果没有淡入淡出或延迟）。我究竟做错了什么？
$("#showForm").hover(
function () {
$(this).fadeIn('slow', function(){
$(this).attr("src", 'images/AddButtonSmall.gif');
});
},
function () {
$(this).fadeIn('slow', function(){
$(this).attr("src", 'images/AddButtonSmallGray.gif');
});
}
);
回答by mrtsherman
Here are a couple solutions. Your code doesn't work because you are setting the source which changes the image immediately. It's probably easier just to load both images, overlay them with CSS and then fade the color one in out when the parent container is moused over. Alternatively you could cross fade them
这里有几个解决方案。您的代码不起作用，因为您正在设置立即更改图像的源。加载两个图像，用 CSS 覆盖它们，然后当鼠标悬停在父容器上时，将颜色淡入淡出可能更容易。或者你可以交叉淡入淡出它们
css
css
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}?
html
html
<div class="fader">
<img src="http://placehold.it/300x300/000fff" />
<img src="http://placehold.it/300x300/fff000" />
</div>?
fade in on mouseover
鼠标悬停时淡入
$('.fader').hover(function() {
$(this).find("img:last").fadeToggle();
});?
cross fade
淡入淡出
$('.fader').hover(function() {
$(this).find("img").fadeToggle();
});?
回答by mc.
$(this).fadeIn('slow',
is actually trying to fade in the this element, slowly, and 'this' refers to
实际上是试图慢慢地淡入 this 元素，而 'this' 指的是
$("#showForm")
Instead if you want you could put the color image directly over the current grayscale image, and mark the color image hidden, then have it slowly fade in. Assuming they are positioned on top of one another you could do:
相反，如果您愿意，您可以将彩色图像直接放在当前灰度图像上，并将彩色图像标记为隐藏，然后让它慢慢淡入。假设它们彼此重叠，您可以这样做：
$("#showForm").hover(
function () {
$("#colorImageID").fadeIn();
},
function () {
$("#colorImageID").fadeOut();
});
}
);
);
assuming the html is something like (where sameAbsolutePosition is css to put them in the same exact spot, so maybe something like position:absolute; left:20; top:20px;):
假设 html 类似于（其中 sameAbsolutePosition 是 css 将它们放在相同的确切位置，所以可能类似于 position:absolute; left:20; top:20px;）：
<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition">
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition">
To reiterate, you'll be fading a new image on top of another image. You could also fade the grayscale image out simultaneously.
重申一下，您将在另一张图像上淡出一个新图像。您也可以同时淡出灰度图像。
回答by Jashwant
Where are you fading out ?
Fade in does display:blockwith opacity changing from 0 to 100.
Fade out does display:nonewith opacity changing from 100 to 0.
你在哪里淡出？淡入是不display:block透明度从 0 变为 100。淡出是不display:none透明度从 100 变为 0。
Once, you fadeIn, image is display:blockand opacity is 100. So, you dont see an animation.
So, either do a display:none or fadeOut before fadeIn again.
有一次，你淡入，图像display:block和不透明度是 100。所以，你看不到动画。因此，在再次淡入之前执行 display:none 或fadeOut 。
Given is example with explains things. You should change it according to your requirements.
给出了解释事物的例子。您应该根据您的要求更改它。
$("#showForm").hover(
function () {
$(this).fadeOut('fast').fadeIn('slow', function(){
$(this).attr("src", 'images/AddButtonSmall.gif');
});
},
function () {
$(this).fadeOut('fast').fadeIn('slow', function(){
$(this).attr("src", 'images/AddButtonSmallGray.gif');
});
}
);
回答by Robert Smith
Much better solution:
更好的解决方案：
Forget about javascript to do this job. Use CSS's spritesinstead. If you insist on having fadeIn, fadeOut, use transitions.
忘记 javascript 来完成这项工作。改用 CSS 的精灵。如果您坚持使用淡入淡出，请使用过渡。
UPDATE: Responding to the comments below, I can't write some code since there is no way I can anticipate dimensions and positions in Todd's sprite. I also want to clarify that my suggestion is to use sprites and then transitions to enhance "functionality" and not only transitions because I assume he needs this to work in IE8 and IE9.
更新：响应下面的评论，我无法编写一些代码，因为我无法预测 Todd 精灵中的尺寸和位置。我还想澄清一下，我的建议是使用精灵，然后使用过渡来增强“功能”，而不仅仅是过渡，因为我认为他需要这个才能在 IE8 和 IE9 中工作。
回答by Ranganadh Paramkusam
Try with this
试试这个
$("#showForm").hover(
function () {
$(this).fadeOut('fast',function(){
$(this).attr("src", 'images/AddButtonSmall.gif');
$("#img_src").html("images/AddButtonSmall.gif");
});
$(this).fadeIn('fast');
},
function () {
$(this).fadeOut('fast',function(){
$(this).attr("src", 'images/AddButtonSmallGray.gif');
$("#img_src").html("images/AddButtonSmallGray.gif");
});
$(this).fadeIn('fast');
}
);?
Here's Fiddle
这是小提琴
回答by Steinwolfe
You could do this cross fade with css3 using transition too. Not available for all browsers but still... http://www.w3schools.com/css3/css3_transitions.asp
您也可以使用过渡使用 css3 进行淡入淡出。不适用于所有浏览器，但仍然...... http://www.w3schools.com/css3/css3_transitions.asp
In similar way to CSS: image link, change on hover
For example:
例如：
#showForm
{
background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#showForm:hover {
background-image: url('images/AddButtonSmall.gif');
}
回答by piyush prajapati
Try with this
试试这个
$(".image_hover").mouseover(function(){
var old_src=$(this).attr("src");
var new_src=$(this).attr("data-alt-src");
$(this).attr('src', new_src);
$(this).attr('data-alt-src', old_src);
});
$(".image_hover").mouseout(function(){
var old_src=$(this).attr("src");
var new_src=$(this).attr("data-alt-src");
$(this).attr('src', new_src);
$(this).attr('data-alt-src', old_src);
});
