Question

我尝试了很多我在这个网站上找到的代码，但似乎都没有。我对HTML和jQuery不是很了解，所以我做错了可能是非常简单的事情。以下是一些示例代码：

<script type="text/javascript">
  $('#Pic').hover(function(){  
    $('#HomeRoll', this).stop().animate({
      opacity: 1
      }, 250);
    }, function() {
    $('#HomeRoll', this).stop().animate({
      opacity:0 
      }, 250);
})
</script>

<div id="Nav">
    <a href="home.html" id="HomeLink"><img id="Pic" src="images/house_active.png" style="top: 18px; left:26px; position: relative" /></a>
    <div id="HomeRoll">Home</div>
    <br>
    <img id="Pic" src="images/appicon.png" style="top: 36.5px; left:26px; position: relative" /><br>
    <img src="images/contacticon.png" width="70px" height:"75px" style="top: 58px; left:28px; position: relative" />
</div>

我可能做错了什么？

Answer 1

已有可用于淡入（fadeIn）和out（fadeOut）的方法。这应该让你朝着正确的方向前进：

<script type="text/javascript">
    $(function() {
        $("#HomeRoll").hover(
            function() {
                $("#fadeRoll").fadeIn("slow");
            }, 
            function() {
                $("#fadeRoll").fadeOut("slow");
            }
        );
    });
</script>

<div id="Nav"> 
    <a href="home.html" id="HomeLink"></a> 
    <div id="HomeRoll">Home</div> 
    <div id="fadeRoll" style="display:none;">Fade Me!</div>
</div>

为了举例，我只使用<div>来演示淡入淡出效果，但您可以将其替换为图像或其他元素。

这是一个jsFiddle：http://jsfiddle.net/CwQet/

如何在翻转时使用jQuery淡入DIV？

1 个答案: