jQuery 中的宽度切换动画在 FireFox 中不起作用？

Question

我可能做错了，还是 jQuery 动画功能在 Firefox 中真的不起作用？这适用于 IE8、Opera 和 Chrome，但不适用于 Firefox。

如果我真的没有弄乱语法...有什么解决方法可以使它在 Firefox 中也能正常工作？

谢谢。

HTML

<body>
    <div id="SearchIcon">Ar!</div>
<div id="LeftPanel"></div>

</body>

CSS

body{
    background:orange;
}

#SearchIcon{
    background:yellow;
    height:20px;
    width:40px;
}
#LeftPanel{
    position:absolute;
    vertical-align:top; 
    background:green;
    width:1096px;
    height:588px;
}

JS

$('#SearchIcon').click(function() {

        event.preventDefault();
        var toggleWidth = $("#LeftPanel").width() == 365 ? "1096px" : "365px"; 
        $('#LeftPanel').animate( {'width': toggleWidth}, 300); 


});

Answer 1

删除event.preventDefault()。

编辑：

event 在 firefox 的全局范围内不可用。通过在定义它之前调用它，您正在创建一个错误，阻止执行该方法的其余部分。只需在回调中添加一个事件变量即可。

$('#SearchIcon').click(function(event) {

    event.preventDefault();
    var toggleWidth = $("#LeftPanel").width() == 365 ? "1096px" : "365px"; 
    $('#LeftPanel').animate( {'width': toggleWidth}, 300); 

});

Answer 2

错误是event is not defined。

传入 event:

$('#SearchIcon').click(function(event) { /* <-- pass in event param */
    var $panel = $("#LeftPanel"),
        toggleWidth = $panel.width() == 365 ? "1096px" : "365px";

    event.preventDefault();
    $panel.animate( {'width': toggleWidth}, 300); 
});

... 并存储您的 $("#LeftPanel") 查询。

jQuery 中的宽度切换动画在 FireFox 中不起作用？

Width Toggle Animate in jQuery doesn't work in FireFox?

html

javascript

css

firefox

jquery