Javascript 如何使悬停背景平滑地淡入淡出？

我在我的网站上有一个列表，

背景是一个不透明度为30%的1像素黑色图像，重复填充整个

。它有一个悬停，这是一个不透明度为2%的1像素白色图像

我希望悬停背景平滑地淡入（和淡出），而不是立即出现悬停背景

HTML

我认为我想要的东西可以通过jQuery实现，但我不知道如何实现

---

编辑：简单地说，我想要的只是使

的过渡平稳。

使用css3过渡，您可以最轻松地做到这一点，如下所示：

li{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;
    background: url('../images/black_op30.png');
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #2f2f2f;
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    -ms-transition: background 1s;
    transition: background 1s;
}

li:hover{
    background: url('../images/white_op2.png') repeat;
    background: rgba(255,255,255,0.02);
}

请注意，过渡是在透明颜色到rgba版本之间发生的。使用jQuery也可以实现同样的效果，但它要复杂得多，而且动画效果也不会那么流畅。在IE中，透明颜色和rbga之间的淡入淡出是不可能的，使用这种技术，IE可以很好地工作并且不会淡入淡出（它会返回到不支持rgba的.png文件）

IE支持的方法（自己动手）：

JS:

http://api.jquery.com/hover/ http://api.jquery.com/fadeOut/

但是，在所有其他浏览器中，这种方法仍然会产生比CSS3方法更糟糕的结果，因此理想情况下，您可以使用这两种方法，并通过if语句控制HTML、CSS和JS来检测IE。此外，IE9支持rgba，但不支持转换，因此对于一个最好的场景，您可以使用ie6-8的IE版本，使用jQuery颜色插件的版本：

适用于IE9和所有其他浏览器的简单CSS3

---

或者你可以说，‘嘿，交叉淡出对我的设计没有那么重要，如果那些没有更新浏览器的人错过了，那没关系。’这是我强烈建议的。

我希望这会给你一个想法和一个好的开始，itz非常简单

        <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script type="text/javascript">
          $(".yourCssClassNameHere").hover(funcOver, funcOut);
              function funcOver() {
                $("#Id of You want to fade in").fadeIn(100);//time is in ms
                }
               function funcOut() {
                $("#Id of You want to fade out").fadeOut(100);
                 }
           </script>

$（.yourCssClassNameHere”）。悬停（funcOver，funcOut）；
函数funcOver（）{
$（“#您想要淡入的Id”）.fadeIn（100）；//时间单位为毫秒
}
函数funcOut（）{
$（“#您想要淡出的Id”）。淡出（100）；
}

此解决方案的另一个变体是使用匿名函数，如@Joseph Torraca在其回复中所示。

要在悬停时进行特定的淡出，我已经对其进行了测试，请尝试以下操作：

  <ul>
   <li onmouseover="$(this).fadeOut()">Hover me to disappear</li>
  </ul>

悬停让我消失

有关更多信息：


FadeIn

淡出

---

一种方法是使用jQuery

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $('.yourclasshere').hover(function() {
        $('#idofelement').fadeIn(300); // Time in milliseconds
    , function() {
        $('#idofelement').fadeOut(300); // Time in milliseconds
    });
</script>

$（'.yourclassehere'）.hover（函数（）{
$（'#idofelement'）.fadeIn（300）；//以毫秒为单位的时间
，函数（）{
$（'#idofelement'）.fadeOut（300）；//以毫秒为单位的时间
});

我认为，如果您必须使用css2和不同的浏览器，最好的方法是使用Jquery/JQueryUI

看

---

您可能需要对它进行一些处理……悬停的想法也有其价值，也许组合正是您想要的

是的，但我希望这也适用于不支持CSS3的旧浏览器，因此jQuery将是一个选择（我认为）。只有IE不支持此功能。为了在IE中实现相同的效果，您必须使用两个div，每种颜色一个div，并在它们之间淡入淡出，然后使用IE专有的alpha image loader过滤系统。您正在谈论大量额外工作。我可以告诉您这是否真的值得。尽管CSS3令人敬畏，但我不建议使用它ome，但我们需要向后兼容多个浏览器…如果需要大量工作，我仍然更喜欢在IE中也能工作的jQuery。是的，dotNetSoldier。@dotNetSoldier不幸的是，这仍然不起作用。你不仅需要有两个元素之间的淡入淡出，而且一个没有alpha图像加载程序的简单淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出ult在淡入淡出过程中，透明度会丢失，它会看起来像是在一个坚实的黑色背景上。这是由于IE对.png文件的处理。这是否意味着我必须为悬停背景制作另一个元素，而不是在CSS中声明悬停背景？@Sedoc94 Jquery将为您处理淡入淡出和淡出，你只需要将这些方法应用于所需的元素，浏览示例和链接，你就会像专业人士一样了解它：）不，这不是最简单的方法。请看公认的答案。我还没有尝试过这一方法，但据我所知，这将使列表中的所有20项立即反应。我只希望悬停的

能够反应o悬停。你的意思是当用户悬停在特定的

上时，它应该淡出？是的，只有用户悬停在上面的

应该这样做。你想实现什么？我的意思是，这个淡出和淡出在你的场景中适合什么？淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡…这将是一个问题，因为如果没有它在那里，你无法通过使用事件本身使它重新出现…@Ingo是对的，让我们知道你想要实现什么？整个图片我认为他想要的是我在下面的回答中发布的内容，只要在你悬停在上面时背景混合就可以了。。。（使用toggleClass的jquery ui）简单地说，我想要的只是使

的过渡平稳。我从来没有想到这么小的细节会有这么大的工作量。

#content, #fade-1, #fade-2{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;       
    position: absolute;
}

#content{
    z-index: 3;
}

#wrap{
   position:relative;  
   width: 600px;
   height: 24px;
}

#fade-1{
   background: url('../images/black_op30.png');
   background:transparent url(../images/black_op30.png);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='../images/black_op30.png',sizingMethod='scale');
   background: rgba(0,0,0,0.3);     
   border-bottom: 1px solid #2f2f2f;   
   z-index: 1;    
}
#fade-2{
   display:none;
   background: url('../images/white_op2.png') repeat;
   background:transparent url(../images/white_op2.png);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='../images/white_op2.png',sizingMethod='scale');
   background: rgba(255,255,255,0.02);
   border-bottom: 1px solid #2f2f2f;
   z-index: 2;
}

$('#wrap').hover(function(){
     $('#fade-1').stop().fadeOut();
     $('#fade-2').stop().fadeIn();
}, function(){
     $('#fade-1').stop().fadeIn();
     $('#fade-2').stop().fadeOut();
});

        <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script type="text/javascript">
          $(".yourCssClassNameHere").hover(funcOver, funcOut);
              function funcOver() {
                $("#Id of You want to fade in").fadeIn(100);//time is in ms
                }
               function funcOut() {
                $("#Id of You want to fade out").fadeOut(100);
                 }
           </script>

  <ul>
   <li onmouseover="$(this).fadeOut()">Hover me to disappear</li>
  </ul>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $('.yourclasshere').hover(function() {
        $('#idofelement').fadeIn(300); // Time in milliseconds
    , function() {
        $('#idofelement').fadeOut(300); // Time in milliseconds
    });
</script>