需要有关简单的jQuery淡入/淡出过渡的帮助。
|
使用jQuery，我试图使背景图像在您将鼠标悬停在其上时淡入另一幅图像，并在您将鼠标取下时逐渐淡出。在过去的几个小时中，我尝试了无数解决方案，但似乎找不到合适的解决方案。以下是我的CSS
.thumbnail span {
background: url(\'images/portfolio.png\') no-repeat;
width: 298px;
height: 160px;
position: absolute;
top: 0;
left: 0;
margin-left:-2px;
cursor: pointer;
}
.thumbnail span .rollover {
background: url(\'images/portfolio_vignette.png\') no-repeat;
}
<script type=\"text/javascript\">
$(document).ready(function(){
$(\".rollover\").css({\'opacity\':\'0\'});
$(\'.thumbnail span\').hover(
function() {
$(this).find(\'.rollover\').stop().fadeTo(500, 1);
},
function() {
$(this).find(\'.rollover\').stop().fadeTo(500, 0);
}
)
});
</script>
没有找到相关结果
已邀请:
4 个回复
细瑞
包装纸，然后在上面附加悬停事件。如果不这样做，当图像消失/出现时，悬停将连续触发。 在这里，我只是在悬停时将最后一个元素淡出，而在悬停时则将其淡入淡出。当然，您可以更具体一些，只对标签或特定ID进行操作。通用方式更有用，因为您无需再为另一对图像编写代码。 HTML：<div class=\"hoverfade\"> <img src=\"http://my/image1.jpg\"> <img src=\"http://my/image2.jpg\"> </div>$(\".hoverfade\").hover(function() { $(this).children().last().fadeOut(1000); }, function() { $(this).children().last().fadeIn(500); })妊辽剁茧
郡豪靠暖
款去芳尾脊