jQuery鼠標在IE，Opera，Chrome中的奇怪行爲

我在css/jQuery中有菜單問題，在Firefox中可以正常工作，但在IE，Opera，Chrome中...當我將鼠標懸停在元素上時，到頁面的左邊緣...jQuery鼠標在IE，Opera，Chrome中的奇怪行爲

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css" rel="stylesheet" /> 

    <style type="text/css"> .outer {width: 46px; height: 40px; position: fixed; z-index: 999999; display: block; top: 25%; right: 0px; background: #036; }.inner {overflow: hidden;width: 100px;} .modal {display: none;} .modal-inner {width: 600px;margin: 100px auto;height: 300px;background: #fff !important;border: 12px solid rgba(222, 222, 222, 0.8);z-index: 999999;border-radius: 5px;}.backdrop {z-index: 999998;}</style> 

</head> 
<body> 

    <div class="outer"> 
     <div class="inner" style="">Subscription</div> 
    </div> 

    <script type="text/javascript"> 
     $('.outer').on('mouseenter', function() { 
      $(this).animate({ left: "-=100", width: "+=100" }); 
     }); 
     $('.outer').on('mouseleave', function() { 
      $(this).delay(200).animate({ left: "+=100", width: "-=100" }); 
     }); 
     $('.outer').click(function() { 
      $('.outer').animate({ left: "+=146" }); 
      $('.modal').modal(); 
     }); 
    </script> 

    <div class="modal"> 
     <div class="modal-inner"> 
      Lorem ipsum 
     </div> 
    </div> 

</body> 
</html>

我在哪裏犯了一個錯誤？

來源

2013-02-08 codesign

發生這種情況，因爲我認爲Firefox是在猜測.outer（當其沒有明確規定）等$(this).animate({ left: "-=100", width: "+=100" });作品完全抵消左的價值還不錯。如果其他瀏覽器沒有被定義，並且它沒有被自動計算，那麼動畫會立即將其設置爲0，然後在左側進行動畫處理，然後剪切並且不顯示。在這個解決方案中，我們將顯式設置爲100％，並添加一個等於div.outer寬度的負邊距以正確定位。這樣

.outer { 
width: 46px; height: 40px; position: fixed; z-index: 999999; display: block; top: 25%; right: 0px; background: #036; 
//add this 
left:100%; 
margin-left: -46px; 
}

working fiddle

來源

2013-02-11 19:38:25

你的jQuery應該在</head>之前。使用以下命令：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.outer').on('mouseenter', function() { 
     $(this).animate({ left: "-=100", width: "+=100" }); 
     }); 
     $('.outer').on('mouseleave', function() { 
     $(this).delay(200).animate({ left: "+=100", width: "-=100" }); 
     }); 
     $('.outer').click(function() { 
     $('.outer').animate({ left: "+=146" }); 
     $('.modal').modal(); 
     }); 
    }); 
</script>

來源

2013-02-08 22:57:49 Mooseman

jQuery鼠標在IE，Opera，Chrome中的奇怪行爲

回答

相關問題