Question

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

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

我不想用CSS做这件事，因为那很无聊。 Jquery是我感觉前进的方式，它看起来会更加优雅。

请帮助，我想要尽可能最小的最有效代码，没有层层CSS或巨大的.JS包含文件。

谢谢，

理查德

Answer 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>

Answer 2

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')
}

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

Answer 3

这样的事情可能是：

<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>

Answer 4

看看这个：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>

jquery Hover - 淡化图像到另一个

4 个答案: