javascript - div 的 Jquery 鼠标事件切换效果即使在鼠标事件退出时也会弹跳

Question

jquery鼠标进入和离开事件切换到html页面中的div

代码如下

html代码

<div class="platform_solutions map_link" id="microsoft_link">

      <h3>Heading One</h3>
     </div>
     <div class="testing map_link" id="opensource_link" >

       <h3>Heading Two</h3>
     </div>

     <div class="branding_services map_link" id="verification_link">

      <h3>Heading Three</h3>
     </div>
     <div class="corporate_profile map_link" id="branding_link">

       <h3>Heading Four</h3>
</div>




<div id="microsoft_link1" style="display:none; padding-bottom:20px; float:left;" class="map_data">
<h4>Heading one</h4>
<p>  Test data</p>
</div>
<div id="opensource_link1" style="display:none; padding-bottom:20px; float:left;" class="map_data">
<h4>Heading Two</h4>
<p> Test data two</p>
</div>
<div id="verification_link1" style="display:none; padding-bottom:20px; float:left;" class="map_data">
<h4>Heading Three</h4>
 <p> Test data xussfsf</p>
</div>
<div id="branding_link1" style="display:none; padding-bottom:20px; float:left;" class="map_data">
<h4>Test Heading</h4>
<p> Test data sfs </p>
</div>

J查询代码

$(document).ready(function(){

$(function() {


 $('.map_link').mouseenter(function(){
      event.preventDefault();

    var currentId = $(this).attr('id');
    $("#"+currentId+"1").slideToggle(); 
     $("#"+currentId+"1").css('display','block');
  }).mouseleave(function(){
       event.preventDefault();
   var currentId1 = $(this).attr('id');
    $("#"+currentId1+"1").slideToggle(); 


  });



});




});​

代码运行良好。但是，如果我们将鼠标从一个标题快速移动到另一个标题。它正在产生弹跳效果

Answer 1

请试试这个:工作演示 http://jsfiddle.net/XXTgW/ 或 http://jsfiddle.net/XXTgW/1/

三点注意事项:

• 使用事件通过 funciton(event) 传递它
• http://api.jquery.com/stop/
• 为数据映射添加了隐藏

希望它符合原因 :)

代码

$(function() {


    $('.map_link').hover(function(event) {
        $('.map_data').hide();       
        var currentId = $(this).attr('id');
        $("#" + currentId + "1").stop(true, true).slideToggle();
    }, function(event) {
        $('.map_data').hide();
        var currentId1 = $(this).attr('id');
        $("#" + currentId1 + "1").stop(true, true).slideToggle();

    });


});​