Question

我的css / jQuery菜单有问题，在Firefox中运行良好，但在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>

我在哪里弄错了？

Answer 1

你的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>

Answer 2

这种情况正在发生，因为我认为firefox非常擅长猜测.outer左侧偏移的值（当未明确指定时），因此$(this).animate({ left: "-=100", width: "+=100" });完美无缺。如果没有定义其他浏览器，则不会自动计算它，因此动画会立即将其设置为0，然后在左侧设置动画，这将被裁剪并且不显示。在这个解决方案中，我们明确地将left设置为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

jQuery鼠标在IE，Opera，Chrome中的奇怪行为

2 个答案: