0

我需要一种更改图像来源的方法，该方法attr还可以提供淡化效果。我已经尝试了我在这里找到的其他答案之一，但它没有达到预期的效果。

这是它目前的样子：http: //jsfiddle.net/zeaVx/

在拍摄另一张图像之前，您会注意到整个事物是如何完全消失的。这不是我需要的。我需要即时更改，就像 CSS 一样，:hover但只有褪色效果。

我怎么能做到这一点？

4

3 回答 3

3

创建 2 个单独</img>的标签，将它们包装在一个容器中，将一个放在另一个之上，然后简单地淡入/淡出顶部图像。

HTML

<div class="button-container">
    <img src="http://i.imgur.com/q4A2GtV.png" />
    <img src="http://i.imgur.com/jztqeIv.png" />
</div>

CSS

.button-container {
    position: relative;
}
.button-container img {
    position: absolute;
    left: 0;
    top: 0;
}

jQuery

$('.button-container').hover(function () {
    $(this).find('img:last-child').stop().fadeOut();
}, function () {
    $(this).find('img:last-child').stop().fadeIn();
});

演示：http: //jsfiddle.net/zeaVx/1/

于 2013-11-01T11:54:30.967 回答
0 
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var active = false;

            $(function() {
                $('#fb_icon')
                        .mouseover(function() {
                    if (!active) {
                        active = true;
                        $(this).hide();
                        $(this).attr('src', 'dummyImg2.jpg').fadeIn('slow');
                        active = false;
                    }
                })
                        .mouseout(function() {
                    if (!active) {
                        active = true;
                        $(this).hide();
                        $(this).attr('src', 'dummyImg1.jpg').fadeIn('slow');
                        active = false;
                    }
                });
            });
        });
    </script>
</head>
<body>
    <img src="dummyImg1.jpg" id="fb_icon" alt="">
</body>
</html>
于 2013-11-01T12:18:44.533 回答
0

使用这个jsfiddle.net/Curt/PLwam/1/ 它可能对你有帮助。

于 2013-11-01T11:50:44.723 回答