0

我在 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>

我在哪里做错了？

4

2 回答 2

0

您的 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-08T22:57:49.420 回答
0

发生这种情况是因为我认为 firefox 非常擅长猜测左偏移的值.outer（当它没有明确指定时），因此$(this).animate({ left: "-=100", width: "+=100" });可以完美地工作。如果没有定义其他浏览器，并且它不是自动计算的，那么 animate 会立即将其设置为 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;
}

工作小提琴

于 2013-02-11T19:38:25.703 回答