Question

我想对“导航栏”中的“ li”元素进行不同的淡入和淡出。我的意思是：如果鼠标进入或鼠标离开“ li”，请逐渐消失。但是，如果我从一个“ li”移到另一个“ li”，请不要褪色。可能吗？非常感谢您的每一个回答。

var opened = 0;
$("li").mouseenter(function(e) {
  opened = 1;
  if (opened == 1) {
    $(this).find(".menu-full").fadeIn(0);
  } else {
    $(this).find(".menu-full").fadeIn(300);
  }
});

$("li").mouseleave(function(e) {
  opened = 0;
  if (opened == 1) {
    $(this).find(".menu-full").fadeOut(0);
  } else {
    $(this).find(".menu-full").fadeOut(300);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">News <span class="caret"></span></a>
    <div class="menu-full">
      ...
    </div>
  </li>
  <li><a href="#">Reviews <span class="caret"></span></a>
    <div class="menu-full">
      ...
    </div>
  </li>
  <li><a href="#">Events</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Media</a></li>
  <li><a href="#">Artist</a></li>
</ul>

我希望当鼠标进入或退出“ li”元素时，fade300开始。而如果鼠标从一个元素“ li”传递到另一个元素，则淡入淡出不会开始。

Answer 1

如果我很了解您的问题，则可以创建一个类（并以enter为例），然后在您输入<ul>时将其放入<ul>中，然后将其删除当你离开的时候。

此外，您可以创建一个变量来跟踪您所在的<li>的鼠标进入/ ouseleave：通过<li>时，您可以在0秒内进行一次简单的fadeIn，而如果您退出<ul>，则需要300ms的淡出时间。

我添加了一些CSS只是为了帮助您了解在输入<ul>和<li>时的情况。您可以删除它们。

$(function() {
    var menuFull;

    $("li").hover(function(e){
        var $this = $(this);
        menuFull = $(".menu-full", $this);

        if($this.closest("ul").hasClass("enter")) {
          $(".menu-full").fadeOut(0);
          menuFull.fadeIn(0);
        }
    });

    $("ul").hover(function(){
        var $this = $(this);

        $this.toggleClass("enter");
        menuFull.fadeToggle(300);
    });
  });

/* Start styles for demo */
*{
    padding:0;
    margin:0;
}
body{
    display:flex;
    height: 100vh;
    align-items: center;
}
ul{
    margin:auto;
    float:left;
    min-height: 1px;
    background-color:#cccccc;
    padding:0;
}
li{
    padding:10px;
    list-style: none;
}
/* end styles for demo */


.menu-full{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li><a href="#">News <span class="caret"></span></a>
       <div class="menu-full">
            menu-full
       </div>
   </li>
    <li><a href="#">Reviews <span class="caret"></span></a>
           <div class="menu-full">
             menu-full
           </div>
    </li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Media</a></li>
    <li><a href="#">Artist</a></li>
</ul>

希望有帮助。

jQuery不同的淡入不同的悬停

1 个答案: