1

JQuery .animate()、Firefox 30.0、および "position: fixed" CSS ルールに問題があります。セマンティック UI フレームワークを使用してボタンを作成していますが、ボタンを左上隅に固定したいと考えています。ボタンを押すと表示および非表示になるサイドバーもあります。これは私のコードです:

CSS

.ui.black.button.toggle{
position: fixed;
left: 0px;
top: 35px;
z-index: 99999;
}

HTML

<!DOCTYPE html>
<html lang="it">
<head>
    <!-- Standard Meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Site Properities -->
    <title></title>
    <!-- CSS -->
    <link rel="stylesheet" href="css/cupertino/jquery-ui-1.10.4.custom.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/semantic.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <!-- PHP functions -->
    <?php require_once 'functions/functions.php'; ?>
</head>
<body>
    <!-- Sidebar Part -->
    <?php include_once 'sidebar.php'; ?>
    <div class="ui black launch right attached button toggle">
        <i class="icon list layout"></i>
        <span class="text">Menu</span>
    </div>
    <div class="main container">
        <div class="ui form">
            <div class="ui four column page grid">
                <div class="column">
                </div>
                <div class="column">
                </div>
                <div class="column">
                </div>
                <div class="column">
                </div>
            </div>  
        </div>
    </div>
    <!-- JS Framework -->
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery-ui-1.10.4.min.js"></script>
    <script src="javascript/semantic.min.js" type="text/javascript"></script>
    <!-- My JS -->
    <script src='javascript/main-script.js' type="text/javascript"></script>
</body>
</html>

JQuery

var sidebarStatus = 0;
$(document).on('click', '.ui.button.toggle', function() { 
    if(sidebarStatus === 0){
        sidebarStatus = 1;
        $(".ui.button.toggle")
                        .stop()
                        .animate({
                            "left" : "276px"
                        }, 'fast', function() {
                        });
    } else if(sidebarStatus === 1){
        sidebarStatus = 0;
        $(".ui.button.toggle")
                        .stop()
                        .animate({
                            "left" : "0px"
                        }, 'fast', function() {
                        });
    }
});

Safari と Chrome ではすべて問題なく動作しますが、Firefox 30.0 では、ボタンは 35px から 60px までランダムに左に移動しますが、.animate() 関数で設定された値 (276px) では決して移動しません。ただし、CSS から「position : fixed」を削除すると、Firefox でも正常に動作します。セマンティック UI フレームワークの onShow() および onHide() 設定も使用しましたが、結果は変わりません。この問題は私を夢中にさせます!!! 誰かが私を助けることができますか？

どうもありがとう！！！

サイドバーが非表示の Firefox サイドバー付きの Firefox

4

1 に答える 1

0

私の問題の解決策を見つけました。アニメーション スクリプトを削除し、CSS で "left" の代わりに "margin-left" を使用すると、サイドバーが左側のボタンを自動的かつ正しく押すように見えます。これは、Safari、Firefox、および Chrome で動作する新しい CSS および JQuery コードです (HTML は同じです)。

CSS

.ui.black.button.toggle{
position: fixed;
margin-left: -8px;
margin-top: 35px;
z-index: 500;
}

JQuery-SemanticUI

$('.demo.sidebar')
        .sidebar({overlay: false, useCSS: false, onShow: function() {                    
            }, onHide: function() {
            }
        });

セマンティック UI 設定を使用しなくても機能します。

CSS

.ui.black.button.toggle{
position: fixed;
margin-left: -8px;
margin-top: 35px;
z-index: 500;
}
.ui.black.button.toggle.opened{
margin-left: 0px;
}

JQuery

var sidebarStatus = 0;
$(document).on('click', '.ui.button.toggle', function() { 
    if(sidebarStatus === 0){
        sidebarStatus = 1;
        $(".ui.button.toggle").addClass("opened");                            
    } else if(sidebarStatus === 1){
        sidebarStatus = 0;
        $(".ui.button.toggle").removeClass("opened");
    }
});

さよなら！

于 2014-06-24T19:19:05.837 に答える