0

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

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

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

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

谢谢，

理查德

4

4 回答 4

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>
于 2013-06-28T20:16:53.870 回答
0

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

Java脚本：

$('.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')
}

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

于 2012-06-11T13:14:39.960 回答
0

可能是这样的：

<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>
于 2012-06-11T13:16:39.363 回答
0

看看这个：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>
于 2012-06-11T13:21:44.687 回答