在Firefox上使用JQuery设置固定按钮动画_Jquery_Css_Firefox_Semantic Ui

在Firefox上使用JQuery设置固定按钮动画

jquery css firefox

在Firefox上使用JQuery设置固定按钮动画,jquery,css,firefox,semantic-ui,Jquery,Css,Firefox,Semantic Ui,我对JQuery.animate（）、Firefox 30.0和“position:fixed”CSS规则有问题。我使用语义UI框架创建按钮，我希望按钮固定在左上角。我甚至有一个边栏，显示和隐藏，如果按钮被按下。这是我的代码： CSS .ui.black.button.toggle{ position: fixed; left: 0px; top: 35px; z-index: 99999; } .ui.black.button.toggle{ position: fixed; margin-

我对JQuery.animate（）、Firefox 30.0和“position:fixed”CSS规则有问题。我使用语义UI框架创建按钮，我希望按钮固定在左上角。我甚至有一个边栏，显示和隐藏，如果按钮被按下。这是我的代码：

CSS

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

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

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

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>

所有这些在Safari和Chrome上都能很好地工作，但在Firefox 30.0中，按钮会从35px随机向左移动到60px，但在.animate（）函数中设置的值（276px）不会向左移动。然而，如果我从CSS中删除“position:fixed”，Firefox中也可以正常工作。我甚至使用了语义UI框架中的onShow（）和onHide（）设置，但结果没有改变。这个问题让我发疯！！！有人能帮我吗

非常感谢你

我找到了解决问题的方法。如果我删除动画脚本并在CSS中使用“左边距”而不是“左边距”，侧边栏似乎会自动正确地按下左边的按钮。这是我在Safari、Firefox和Chrome上使用的新CSS和JQuery代码（HTML相同）：

CSS

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

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

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

JQuery-semanticu

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

它甚至可以在不使用语义UI设置的情况下工作：

CSS

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

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

.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")
                        .stop()
                        .animate({
                            "left" : "276px"
                        }, 'fast', function() {
                        });
    } else if(sidebarStatus === 1){
        sidebarStatus = 0;
        $(".ui.button.toggle")
                        .stop()
                        .animate({
                            "left" : "0px"
                        }, 'fast', function() {
                        });
    }
});

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");
    }
});

再见