移動div無法正常工作

Question

我一共有3個div。 一個div總是出現，但當鼠標進入div1時，剩餘的兩個div將出現。這是一個使用jQuery的演示。

Demo使用jQuery

但它不工作正常。 當動畫完成時出現錯誤功能時鼠標進入/退出。所以我嘗試了CSS3，但動畫不能正常工作。使用CSS演示。使用CSS

這裏

Demo是代碼：

的Html：

<div class='holder'> 
    <div class="menu" id="m1"></div> 
    <div class="menu" id="m2"></div> 
    <div class="menu" id="m3"></div> 
</div> 

CSS：

.menu { 
      top:10px; 
      margin: 0; 
      padding:0px; 
      width: 40px; 
      height:40px; 
      border-radius: 100%; 
      display: inline-block; 
      background-color: #34495e; 
      transition: 1s; 
      position: absolute; 
     } 

     #m1 { 
      z-index: 1000; 
     } 

     #m2, #m3 { 
      z-index: 1; 
     } 


     .menu:hover { 
      background-color: #3498db; 
     } 

     .menu:hover ~ div:nth-child(3n), .menu:hover ~ div:nth-child(2n){ 
      position:relative; 
      left: 50px; 
      margin-left: 10px; 
     } 

如何解決probem？我如何通過適當的動畫和鼠標事件移動div？

Answer 1

而不是做一個計算，以刪除您添加的保證金數額的，只是將其設置回0

這使用jQuery的方法。

$(document).ready(function() { 
 
    $('#m2').hide(); 
 
    $('#m3').hide(); 
 

 
    $('#m1').one('mouseenter', function() { 
 
    $('#m2').show(); 
 

 
    //$('#m2').addClass('show'); 
 
    $('#m2').animate({ 
 

 
     'marginLeft': "+=45px" //moves right 
 
    }); 
 
    $('#m3').show(); 
 

 
    //$('#m2').addClass('show'); 
 
    $('#m3').animate({ 
 

 
     'marginLeft': "+=90px" //moves right 
 
    }); 
 
    }); 
 

 
    $('.holder').mouseleave(function() { 
 
    $('#m3').animate({ 
 

 
     'marginLeft': "0px" // sets margin back to 0 
 
    }); 
 
    $('#m2').animate({ 
 

 
     'marginLeft': "0px" // sets margin back to 0 
 
    }); 
 
    }); 
 
});

.menu { 
 
    top: 10px; 
 
    margin: 0; 
 
    padding: 0px; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 100%; 
 
    display: inline-block; 
 
    background-color: #34495e; 
 
    transition: 1s; 
 
    position: absolute; 
 
} 
 
#m1 { 
 
    z-index: 1000; 
 
} 
 
#m2, 
 
#m3 { 
 
    z-index: 1; 
 
} 
 
.holder { 
 
    display: block; 
 
} 
 
#m1:hover { 
 
    background-color: #3498db; 
 
} 
 
.show { 
 
    transition: 1s; 
 
    position: relative; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='holder'> 
 
    <div class="menu" id="m1"></div> 
 
    <div class="menu" id="m2"></div> 
 
    <div class="menu" id="m3"></div> 
 
</div>