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/

需要注意的三件事：

使用事件通过funciton(event)
http://api.jquery.com/stop/
为data_map

hide

希望它适合原因:)

<强>代码

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

    });


});

对于div，Jquery Mouse事件切换效果甚至会弹出鼠标事件退出

1 个答案: