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>

jQuery代码

$(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/

3 件事要注意：

• 使用事件通过它传递funciton(event)
• http://api.jquery.com/stop/
• hide为 data_map添加了

希望它适合原因:)

代码

$(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();

    });


});​