悬停子菜单时停止淡入淡出效果

Question

在淡入淡出效果的菜单栏中将元素悬停时会出现一个div（子菜单），将鼠标悬停在那里时它会停留在那里但是首先会发生淡入淡出效果我不希望发生淡化效果。在盘旋div（子菜单）的同时，div（子菜单）应该留在那里。

/*sub menu*/
$(document).ready(function(){
    $(".main-courses").hover(function(){
        $(".sub-courses").fadeToggle(1000);
    });
    
});

.sub-courses{
    display: none;
    padding: 20px;
    border: 2px solid red;
    background-color: #fff;
    z-index: 289;
    position: fixed;
    top: 50px;
    width: 100%;
}

.sub-courses:hover {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<li><a ui-sref="#" class="main-courses">COURSES <span class="caret"></span></a></li>

<!-- sub menu -->
        <div class="container-fluid sub-courses">
            <div class="row">
                <div class="col-xs-12 col-xs-2">
                    one
                </div>
                <div class="col-xs-12 col-xs-2">
                    two
                </div>
            </div>
        </div>

  

我也尝试过mouseover和mouseout事件，但没有用。

Answer 1

只需将淡化时间从1000更改为0

＆＃13;

＆＃13;

/*sub menu*/
$(document).ready(function() {
  $(".main-courses").hover(function() {
    $(".sub-courses").fadeToggle(0);
  });

});

＆＃13;

.sub-courses {
  display: none;
  padding: 20px;
  border: 2px solid red;
  background-color: #fff;
  z-index: 289;
  position: fixed;
  top: 50px;
  width: 100%;
}

.sub-courses:hover {
  display: block !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<li><a ui-sref="#" class="main-courses">COURSES <span class="caret"></span></a></li>

<!-- sub menu -->
<div class="container-fluid sub-courses">
  <div class="row">
    <div class="col-xs-12 col-xs-2">
      one
    </div>
    <div class="col-xs-12 col-xs-2">
      two
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您不应该使用.fadeToggle()，而只能使用.toggle()。参数1000是动画的持续时间。删除它会产生你想要的效果。

/*sub menu*/
$(document).ready(function(){
    $(".main-courses").hover(function(){
        $(".sub-courses").toggle();
    });
    
});

.sub-courses{
    display: none;
    padding: 20px;
    border: 2px solid red;
    background-color: #fff;
    z-index: 289;
    position: fixed;
    top: 50px;
    width: 100%;
}

.sub-courses:hover {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<li><a ui-sref="#" class="main-courses">COURSES <span class="caret"></span></a></li>

<!-- sub menu -->
        <div class="container-fluid sub-courses">
            <div class="row">
                <div class="col-xs-12 col-xs-2">
                    one
                </div>
                <div class="col-xs-12 col-xs-2">
                    two
                </div>
            </div>
        </div>

Answer 3

如果您想保持淡入淡出效果，可以使用stop()方法将以下内容添加到您的javascript中。

$('.sub-courses').mouseover(function(){
        $(".sub-courses").stop(true,true);
    })

$(document).ready(function(){
    $(".main-courses").hover(function(){
        $(".sub-courses").fadeToggle(1000);
    });
    
    $('.sub-courses').mouseover(function(){
    	$(".sub-courses").stop(true,true);
    })
    
});

.sub-courses{
    display: none;
    padding: 20px;
    border: 2px solid red;
    background-color: #fff;
    z-index: 289;
    position: fixed;
    top: 50px;
    width: 100%;
}

.sub-courses:hover {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a ui-sref="#" class="main-courses">COURSES <span class="caret"></span></a></li>

<!-- sub menu -->
        <div class="container-fluid sub-courses">
            <div class="row">
                <div class="col-xs-12 col-xs-2">
                    one
                </div>
                <div class="col-xs-12 col-xs-2">
                    two
                </div>
            </div>
        </div>