JQuery разные исчезают для различных зависания - PullRequest
Новая
       9

JQuery разные исчезают для различных зависания

0 голосов
/ 08 ноября 2018

Я хотел бы сделать разные элементы fadein и fadeout для элементов "li" в "navbar". Я имею в виду: если мышь вводит или мышь оставляет «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" к другому, затухание не начинается.

1 Ответ

0 голосов
/ 09 ноября 2018

Если я хорошо понял ваш вопрос, вы можете создать класс (и назвать его, например, enter) и поместить его в <ul>, когда вы вводите <ul>, а затем удалить его, когда уходите.

Кроме того, вы можете создать переменную, которая отслеживает <li>, в котором вы находитесь в mouseenter / mouseleave: когда вы проходите через <li> s, вы можете сделать простой fadeIn с 0 секундами, а если вы идете из <ul> сделать затухание с 300 мс.

Я добавил немного 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>

Надеюсь, это поможет.

...