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

これは、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;
}

働くフィドル

于 2013-02-11T19:38:25.703 に答える
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 に答える