显示/隐藏工作太快了

时间:2016-01-06 11:01:26

标签: jquery html


这是我的代码:



$(document).ready(function() {
  $("#rozwin").on({
    mouseenter: function() {
      $("#rozwin").hide();
      $('.ukryjDoRozwiniecia').show();
    },
    mouseleave: function() {
      $("#rozwin").show();
      $('.ukryjDoRozwiniecia').hide();
    }
  });
});

.ukryjDoRozwiniecia {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="rozwin">
    <a href="http://livetracking.evt.com.pl">
      <i style="font-size: 14px;" class="fa fa-desktop fa-fw"></i> Live Tracking System
    </a>
  </li>

  <li class="ukryjDoRozwiniecia">
    <a href="http://livetracking.evt.com.pl/">EVT</a>
  </li>
  <li class="ukryjDoRozwiniecia">
    <a href="http://ltrans.evt.com.pl/">L-TRANS</a>
  </li>
  <li class="ukryjDoRozwiniecia">
    <a href="http://intraco.evt.com.pl/">INTRACO</a>
  </li>
</ul>
&#13;
&#13;
&#13;

我尝试隐藏第一个li元素并显示其他3个元素。为什么这么快? JSFIDDLE

2 个答案:

答案 0 :(得分:3)

将持续时间传递给.show.hide。持续时间将在milliseconds,并且mouseleave附加到.ukryjDoRozwinieciamouseenter附加到#rozwin

  

还要尝试将其保存在单独的<ul>中,以免它受到干扰   您在mouseleave li html。查看更新后的$(document).ready(function() { $("#rozwin").on('mouseenter', function() { $(this).hide(400, function() { $('.ukryjDoRozwiniecia').show(300); }); }); $('.ukryjDoRozwiniecia').on('mouseleave', function() { $(this).hide(300, function() { $('#rozwin').show(300); }); }); });

.ukryjDoRozwiniecia {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li id="rozwin"><a href="http://livetracking.evt.com.pl"><i style="font-size: 14px;" class="fa fa-desktop fa-fw"></i> Live Tracking System</a>

  </li>
</ul>
<ul class="ukryjDoRozwiniecia">
  <li><a href="http://livetracking.evt.com.pl/">EVT</a>
  </li>
  <li><a href="http://ltrans.evt.com.pl/">L-TRANS</a>
  </li>
  <li><a href="http://intraco.evt.com.pl/">INTRACO</a>
  </li>
</ul>
fsw_wervelSTX_file = My.Computer.FileSystem.GetFileInfo("G:\divi\RATH\Applicaties\RSM\Program\Settings\IGART\WervelSTX\log_wervelSTX.txt")
    If Not My.Settings.fsw_wevelSTX_lastwrite = fsw_wervelSTX_file.LastWriteTime Then
        PictureBox_wervelSTX.BackColor = Color.Lime
        MsgBox("Time in My.Settings: " & My.Settings.fsw_wevelSTX_lastwrite & "  LastWriteTime: " & fsw_wervelSTX_file.LastWriteTime, MsgBoxStyle.Information)
    Else
        PictureBox_wervelSTX.BackColor = Color.Maroon
        MsgBox("It is the same", MsgBoxStyle.Information)
    End If

答案 1 :(得分:0)

Try this one
//change in html
 <li id="rozwin"><a href="http://livetracking.evt.com.pl"><i style="font-size: 14px;" class="fa fa-desktop fa-fw"></i> Live Tracking System</a></li>
<div id="ukryjDoRozwiniecia">


          <li class="ukryjDoRozwiniecia"><a href="http://livetracking.evt.com.pl/">EVT</a></li>
          <li class="ukryjDoRozwiniecia"><a href="http://ltrans.evt.com.pl/">L-TRANS</a></li>
          <li class="ukryjDoRozwiniecia"><a href="http://intraco.evt.com.pl/">INTRACO</a></li> 

          </div>
//change in js
    $(document).ready(function(){
    $("#rozwin").on({
        mouseenter: function () {
            $("#rozwin").hide();
            $('.ukryjDoRozwiniecia').show();
        }
    });

    $("#ukryjDoRozwiniecia").on({
        mouseleave: function () {
            $( "#rozwin").show();
            $('.ukryjDoRozwiniecia').hide();
        }
    });
});