jquery Hover - 将图像淡入另一个答案

【问题标题】：jquery Hover - Fade Image to Anotherjquery Hover - 将图像淡入另一个
【发布时间】：2012-06-11 12:56:47
【问题描述】：

关于这个话题有很多问题，但我从来没有真正确定一个可靠的答案。我也尝试了各种不同的方法，但从未找到真正的最佳解决方案。

在我的情况下，我需要在页面标题中放置一堆标志。每个标志都是一个 PNG，我还渲染了它们的黑白版本。我想添加一个简单的 CSS 类（DIV 或 IMG，或其他东西！）并有一个小的 jquery 当我悬停在它上面时会淡出彩色图像，当我不悬停时淡出它。

我不想用 CSS 来做，因为那很无聊。我觉得 Jquery 是前进的方向，它看起来会更优雅。

请帮忙，我想要尽可能最小最高效的代码，而不需要一层又一层的 CSS 或巨大的 .JS 包含文件。

谢谢，

理查德

【问题讨论】：

你已经试过什么代码了？
$(document).ready(function() { var x=0; $("#usa_d").hover(function() { $("#usa_d").fadeOut(400) ; x = 1; //$("#usa_d").fadeOut(400,function(){$(this).attr('src',$('#usa_n').attr('src')). fadeIn();}); $('#t').html('ON'); ///alert('hover'); }); $("#usa_d").mouseout(function() { $ (this).fadeIn(900); $('#t').html('off'); //alert('focusout'); //$("#usa_n").fadeOut(400,function() {$(this).attr('src',$('#usa_d').attr('src')).fadeIn();}); }); });但这不起作用。对不起，我对stackOverflow很陌生
但是，这似乎工作正常，除了 - 我看不到它与多个图像一起工作，而且，当我停止悬停时，它似乎喜欢再次淡入和淡出。我不知道为什么。那里的 HTML 试图调试它。
哇，如果您想发布一些代码，请使用编辑功能并更新您的问题，这是不可读的。或者在jsfiddle.net 做一个例子
啊，对不起。 :P 除了评论哈哈，我什么都看不出来！

标签： jquery image hover fade

【解决方案1】：

如果您将鼠标快速移入和移出图像多次，Arnar Yngvason 的解决方案可能会出现问题。这可能导致动画冻结。这个缺陷可以通过使用fadeTo 方法而不是fadeIn/fadeOut 方法来规避：

<div class="flag" style="background-image:url(bw.png)"><img src="incolor.png" style="display:none;"></div>

<script>
$(document).ready(function() {
    $('.flag').hover(function() {
        $(this).find('img').stop().fadeTo(400, 1);
    }, function() {
        $(this).find('img').stop().fadeTo(400, 0);
    });
});
</script>

【讨论】：

【解决方案2】：

可能是这样的：

<div class="flag" style="background-image:url(bw.png)"><img src="incolor.png" style="display:none;"></div>

<script>
$(document).ready(function() {
    $('.flag').hover(function() {
        $(this).find('img').stop().fadeIn('fast');
    }, function() {
        $(this).find('img').stop().fadeOut('fast');
    });
});
</script>

【讨论】：

其实这很好用。当然，我需要对其进行一些修改才能工作，但这正是我想要的 - 非常感谢！
show() 和 hide() 也会对尺寸进行动画处理，我认为您不希望这样做。

【解决方案3】：

看看这个：http://jsbin.com/efovuz/2/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .flag { width:350px; height:150px; position:relative; }
  .flag img { position:absolute; left:0; top:0; display:block; }
</style>
</head>
<body>
<div class="flag">  
  <img src="http://placehold.it/350x150/ff0" /> 
  <img class="bw" src="http://placehold.it/350x150/" />  
</div>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(function() {
       $('.flag').hover(
          function () {
              $(this).children('.bw').first().fadeOut('slow');
           },
          function () {
              $(this).children('.bw').first().fadeIn('slow');
           }
        ); 
    });
</script>
</body>
</html>

【讨论】：

为什么？如果您理解定位并按其应有的方式使用定位，那么定位是一种可靠的布局和控制方式。

【解决方案4】：

HTML：

<div class"flag-area england"><div>
<div class"flag-area germany"><div>

CSS：

/* Example default values */
.flag-area
{
    background-position: 5px 10px;
    background-repeat: no-repeat;
}

/* Flag specfic values */
.flag-area.england
{
    background-image:url('images/england.png')
}

/* Flag specfic values */
.colored-flag.england
{
    background-image:url('images/england_colored.png')
}

.colored-flag.germany
{
    background-image:url('images/germany_colored.png')
}

JavaSript：

$('.flag-area').hover(function () {
    $(this).toggleClass('colored-flag', 500);
}, function () {
    $(this).toggleClass('colored-flag', 1000 );
});

但如果你可以使用 CSS 解决这个问题并使用类似的规则，我建议不要使用 javascript：

/* Flag specfic values */
.flag-area.england:hover
{
    background-image:url('images/england_colored.png')
}

还有另一个提示：如果你有很多标志要显示，不要使用很多图像，而只使用一个包含所有标志的图像，而不是更改背景图像，对所有标志使用相同的背景图像并更改其位置。

【讨论】：

这不就像 CSS 悬停一样吗？有没有褪色，萨利？
是的，拥有一个“图标集”是个好主意——但是这样做的真正优势是什么——它只是更快吗？在查看来源时，我在 twitter 和 facebook 等大型网站上看到了很多。
好吧，您只需调用一次图标集图像，就可以避免产生过多的流量。每个被阻止的 GET 都是一个好的 GET :-)