需要简单的jquery淡入/淡出转换帮助

使用jquery，我试图让一个背景图像在您将鼠标移到另一个上时淡入其中，当您将鼠标移开时淡入淡出。在过去的几个小时里，我尝试过无数的解决方案，似乎无法找到适用的解决方案。下面是我的CSS需要简单的jquery淡入/淡出转换帮助

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

干杯家伙！

来源

2011-06-14 John

Java是为JavaScript什么车地毯。这是JavaScript，而不是Java。 – configurator 2011-06-14 18:31:00

那么，你把Java下的JavaScript来抓漏油？ – 2011-06-14 18:50:35

确保将div包装放在两个图像周围，并将悬停事件附加到该图像上。如果您不这样做，则随着图像消失/出现，您的悬停将持续触发。

在这里，我简单地将徘徊时的最后一个元素褪色，并在非悬停时淡出。当然，您可以更具体一些，并仅对img标签或特定标识采取行动。通用的方法更有用，因为您不必再为另一对图像编写代码。

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

来源

2011-06-14 18:31:30

用fadeToggle替换fadeOut/fadeIn .. – technopeasant 2011-06-16 00:53:25

将您的2张图片完全放在同一位置，然后用javascript让顶部图像淡出。这将使你想要的效果

来源

2011-06-14 18:05:41 eveevans

您可以使用图像标记（img）而不是背景CSS。在你想使用背景CSS的情况下，使用2 div覆盖 – eveevans 2011-06-14 18:08:43

你可以访问缩略图类来执行淡入或淡出。

$（。thumbnail）.fadeIn（'slow'）;

或

$（。thumbnail）.fadeIn（700）; //毫秒

到淡出做反向

$ .fadeOut（ '快'）（缩略图）;

或

$ .fadeOut（300）（缩略图）; //毫秒

来源

2011-06-14 18:06:53 james31rock

简化杰夫B的代码..

：使用具有背景图像的div http://jsfiddle.net/jtbowden/wQkWR/

实施例

使用jQuery的fadeToggle避免单独功能的淡出和。

http://jsfiddle.net/danielredwood/wQkWR/2/

来源

2011-06-14 19:51:39 technopeasant

需要简单的jquery淡入/淡出转换帮助

回答

相关问题