Question

我希望在主导航中每个锚点的鼠标悬停时淡入img（#bgimg）。我想为每个锚点添加一个不同的img。我正在使用插件Fullscreenr，并且有四个不同的img，每个都与我的主导航中的链接有关。在mouseout上我希望它回到原来的img。我只想在我的主页上这样做。下面是我想要使用它的页面的链接以及我标记的剪辑：

http://tamedia.ca/marlowe/home.html

<body>
  <img id="bgimg" src="img/bg-home.jpg" />

  <div id="container">
  <header>      
       <nav>
        <ul>
          <li><a href="brand.html">BRAND</a></li>
          <li><a href="collection-aw12.html">COLLECTION</a></li>
          <li><a href="boutiques.html">BOUTIQUES</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
       </nav>
    </header>
 </div>
</body>

Answer 1

好吧，我不能为你提供一个解决你问题的脚本，因为你必须做你的功课，但这里有一些你可以做的演练。首先在列表项中添加类或ID。像这样：

<li><a href="brand.html" id="brand">BRAND</a></li>

而且，也许在底部，身体标签之前，或者你有javascript的地方，你可以添加这样的东西：

<script>
  $(document).ready(function() {

      //selects the element with the id of brand on mousein
      $('#brand').hover(

             function() {
             //replaces the image on the element bgimg with one called bg-brand.jpg
                $('#bgimg').attr('src', 'img/bg-brand.jpg');
             //fades in the image
                $('#bgimg').fadeIn("slow");
             }, 
             function () {
             //returns to its original background image after the mouseout
                $('#bgimg').attr('src', 'img/bg-home.jpg');
             //fades out the image
                $('#bgimg').fadeOut("slow");
             }
      );

  })(jQuery);
</script>

此示例仅翻转第一个锚点的背景图像，但如果这样可行，我猜您知道该练习。淡入/淡出图像需要一些额外的编码。

Answer 2

以下是我最终使用的内容：

$(function () {

    $('#brand-nav').hover(function () {
        $('#bgimg').fadeOut('fast', function () {
            $('#bgimg').attr( 'src', 'img/bg-brand.jpg' );
            $('#bgimg').fadeIn('slow');
        });
    }, function () {
        $('#bgimg').fadeOut('fast', function () {
            $('#bgimg').attr('src', 'img/bg-home.jpg' );
            $('#bgimg').fadeIn('slow');
       });
    });       

});

鼠标悬停时淡入图像 - 全屏 - jQuery

2 个答案: