需要有关简单的jQuery淡入/淡出过渡的帮助

如何解决需要有关简单的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;

}

这是我的JavaScript：

<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>

大家好！     

解决方法

        确保在两个图像周围放一个

div

包装纸，然后在上面附加悬停事件。如果不这样做，当图像消失/出现时，悬停将连续触发。 在这里，我只是在悬停时将最后一个元素淡出，而在悬停时则将其淡入淡出。当然，您可以更具体一些，只对

img

标签或特定ID进行操作。通用方式更有用，因为您无需再为另一对图像编写代码。 HTML：

<div class=\"hoverfade\">
    <img src=\"http://my/image1.jpg\">
    <img src=\"http://my/image2.jpg\">
</div>

jQuery的：

$(\".hoverfade\").hover(function() {
    $(this).children().last().fadeOut(1000);
},function() {
    $(this).children().last().fadeIn(500);
})

示例：http：//jsfiddle.net/jtbowden/wQkWR/ 使用带有背景图像的div的示例：http://jsfiddle.net/jtbowden/wQkWR/1/     ,        将2张图片完全放在同一位置，然后使用javascript使顶部图片淡出。那会产生你想要的效果     ,        您可以访问缩略图类以执行淡入或淡出。 $（。thumbnail）.fadeIn（\'slow \'）; 要么 $（。thumbnail）.fadeIn（700）; //毫秒 淡出相反 $（。thumbnail）.fadeOut（\'fast \'）; 要么 $（。thumbnail）.fadeOut（300）; //毫秒     ,        简化Jeff B \的代码。 使用jQuery \的fadeToggle避免淡入和淡出的单独功能。 http://jsfiddle.net/danielredwood/wQkWR/2/