时间戳

首页 > 解决方案 > jQuery - 悬停时淡入图像，之后淡出

html - jQuery - 悬停时淡入图像，之后淡出

问题描述

我目前正在努力解决我正在设计的全屏菜单上的问题。

菜单有四个项目——我希望每个菜单项都有一个图像淡入。如果它不再悬停在该项目上，它可以恢复到主图像。

我的菜单 HTML 如下：

<div class = "menu">
  <div class = "images">
    <span class = "bg bg1 hide"></span>
    <span class = "bg bg2 hide"></span>
    <span class = "bg bg3 hide"></span>
    <span class = "bg bg4 hide"></span>
  </div>

  <div class = "nav">
    <div class = "menu">
      <ul>
        <li>
          <span id = "order"> 01. </span>
          <span id = "menu"> &nbsp;Home /</span>
          <span id = "tag"> intro </span>
        </li>
        <li>
          <span id = "order"> 02. </span>
          <span id = "menu"> &nbsp;About /</span>
          <span id = "tag"> our history </span>
        </li>
        <li>
          <span id = "order"> 03. </span>
          <span id = "menu"> &nbsp;Careers /</span>
          <span id = "tag"> work here </span>
        </li>
        <li>
          <span id = "order"> 04. </span>
          <span id = "menu"> &nbsp;Contact /</span>
          <span id = "tag"> get in touch </span>
        </li>
      </ul>
    </div>
  </div>
</div>

然后我运行以下 jQuery 脚本：

<script type ="text/javascript">
jQuery(function() {
    $(".menu-item-1").hover(function() {
      $(".bg1").fadeIn(800);
    }, function() {
          $(".bg1").fadeOut(800);
    })
    $(".menu-item-2").hover(function() {
      $(".bg2").fadeIn(800);
    }, function() {
          $(".bg2").fadeOut(800);
    })
    $(".menu-item-3").hover(function() {
      $(".bg3").fadeIn(800);
    }, function() {
          $(".bg3").fadeOut(800);
    })
    $(".menu-item-4").hover(function() {
      $(".bg4").fadeIn(800);
    }, function() {
          $(".bg4").fadeOut(800);
    })
})
</script>

我对从这里去哪里有点茫然——真的很感谢你的帮助！

标签： htmljquery

解决方案

我在 li 标签中添加了 class="menu-item-1" 和 data 属性

https://api.jquery.com/data/

我评论了我所有的javascript。

jQuery(function() {
    // we find all animated span .bg
    var isAnimating = $(".bg").is(':animated');
    
    // we check if the span .bg are animated    
    if (!isAnimating) {
      // we get all hover event on li with class starting or like "menu-item-" 
      $("li[class^='menu-item-'],li[class*='menu-item-']").hover(function() {
        // we put in selector the value of data background
        $("." + $(this).attr("data-background")).fadeIn(800);
      }, function() {
        $("." + $(this).attr("data-background")).fadeOut(800);
      })
    }
})
.bg { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "menu">
  <div class = "images">
    <span class = "bg bg1 hide">bg1</span>
    <span class = "bg bg2 hide">bg2</span>
    <span class = "bg bg3 hide">bg3</span>
    <span class = "bg bg4 hide">bg4</span>
  </div>

  <div class = "nav">
    <div class = "menu">
      <ul>
        <li class="menu-item-1" data-background="bg1">
          <span id = "order"> 01. </span>
          <span id = "menu"> &nbsp;Home /</span>
          <span id = "tag"> intro </span>
        </li>
        <li class="menu-item-2" data-background="bg2">
          <span id = "order"> 02. </span>
          <span id = "menu"> &nbsp;About /</span>
          <span id = "tag"> our history </span>
        </li>
        <li class="menu-item-3" data-background="bg3">
          <span id = "order"> 03. </span>
          <span id = "menu"> &nbsp;Careers /</span>
          <span id = "tag"> work here </span>
        </li>
        <li class="menu-item-4" data-background="bg4">
          <span id = "order"> 04. </span>
          <span id = "menu"> &nbsp;Contact /</span>
          <span id = "tag"> get in touch </span>
        </li>
      </ul>
    </div>
  </div>
</div>

推荐阅读