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中不起作用吗？

2 个答案: