用效果更改属性

Change attr with an effect

本文关键字：属性      更新时间：2023-09-26

我需要一种使用attr更改图像源的方法，这也将在此过程中提供淡入淡出效果。我已经尝试了我在这里找到的其他答案之一，但它没有给出预期的效果。

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

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

我该如何才能实现这一目标？

创建 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;
}

杰奎里

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

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

使用此 jsfiddle.net/Curt/PLwam/1/ 它可能对您有所帮助。

<!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>
相关文章：