Question

我遇到了JQuery .animate（），Firefox 30.0和＆＃34;位置：固定＆＃34; 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）。但是，如果我删除＆＃34; position：fixed＆＃34;从CSS也在Firefox中正常工作。我甚至使用了Semantic UI框架中的onShow（）和onHide（）设置，但结果并没有改变。这个问题让我发疯！有人可以帮帮我吗？

非常感谢!!!

Firefox with Sidebar hidden

Answer 1

我为我的问题找到了解决方案。如果我删除动画脚本并使用＆＃34; margin-left＆＃34;而不是＆＃34;左＆＃34;在CSS中似乎侧边栏自动并正确地按下左侧的按钮。所以这是我在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");
    }
});

再见！

在Firefox上使用JQuery发出动画固定按钮

1 个答案: