javascript - 用效果改变属性

标签 javascript jquery html css

我需要一种使用 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;
}

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/

关于javascript - 用效果改变属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19726110/

相关文章:

javascript - Puppeteer 框架请求

javascript - jQuery 迭代次数过多导致函数崩溃

javascript - 从 window.digitalData.user 获取值

javascript - 判断字符串长度是否为9个字符且全是数字

html - 按钮和输入不继承正文的字体系列

javascript - preventDefault()、滚动和可访问性

javascript - JS 切片、拆分和解析

javascript - 当我向上滚动时,导航栏必须停留在顶部位置并且不要通过跟随导航栏图像隐藏

jquery - 如何使用 jQuery 模拟打字?

javascript - 尝试使用模态预览图像时出现问题