1

我对 JQuery .animate()、Firefox 30.0 和“位置：固定”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）。但是，如果我在 Firefox 中从 CSS 中删除“位置：固定”也可以正常工作。我什至使用了 Semantic UI 框架中的 onShow() 和 onHide() 设置，但结果没有改变。这个问题让我抓狂！！！有人可以帮助我吗？

太感谢了！！！

隐藏侧边栏的 Firefox 带有侧边栏的 Firefox

4

1 回答 1

0

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

CSS

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

JQuery - 语义UI

$('.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 回答