Jquery ui jquery ui滑动切换动画在FireFox中无法正常工作
考虑使用jQuery.ui slidetoggle的这个简单的独立示例:Jquery ui jquery ui滑动切换动画在FireFox中无法正常工作,jquery-ui,firefox,slidetoggle,Jquery Ui,Firefox,Slidetoggle,考虑使用jQuery.ui slidetoggle的这个简单的独立示例: <html> <head> <title>Toggle Test</title> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/> <script src="//
<html>
<head>
<title>Toggle Test</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#fold').click(function () {
$('.inner').slideToggle(2000);
});
});
</script>
</head>
<body>
<div id="fold">+-</div>
<div class="inner">
TESTTESTTESTTESTTESTTESTTESTTEST<br/>
TESTTESTTESTTESTTESTTESTTESTTEST<br/>
TESTTESTTESTTESTTESTTESTTESTTEST<br/>
TESTTESTTESTTESTTESTTESTTESTTEST<br/>
</div>
</body>
</html>
预期行为:单击折叠元素将折叠.inner元素,并以2秒的动画更改高度
当我第一次在Firefox中加载页面时,它就可以工作了。
但是,只要我在Firefox中打开Dom Inspector并选择例如.inner元素,行为就会改变:
单击将导致在2秒后将元素的显示更改为“无”,但动画将消失。
在chrome中,一切都很好
注1:
我使用的是ubuntu代表提供的FF33.0。
当试图用jsfiddle重现这一点时,请确保右下角Iframe的内容实际显示在DOM检查器中
注2:
我正在使用JSON编辑器,在尝试实现折叠标记时遇到了这个问题。
Firefox中始终缺少切换动画。我希望这个简单问题的解决方案能提供一个提示。在firefox中运行良好,对我来说,您的JSFIDLE链接的行为与我在firefox中描述的一样:首先,它可以工作,只要我打开inspector并选择.inner元素,它就不能工作。我使用的是ubuntu代表的FF33。在尝试使用JSFIDLE进行复制时,请确保右下角Iframe的内容实际显示在DOM检查器中。我只是单击了他的小提琴并在Firefox 33.1.1中进行了尝试,每次都有效。我不确定你想说什么关于inspector,但我在开发工具中“检查”了这个元素,它仍然有效。我的FF版本是33.0-不确定这是否有区别。关于inspector:jsfiddle将结果嵌入到iframe中,当我第一次尝试检查“.inner”元素时,它会以某种方式选择它,但不会在inspector中显示iframe的html内容,因此问题不会出现。但是,在尝试了几次之后,最终iframe内容确实显示了,并且出现了错误。我在FF 33.0.1中进行了测试,通过选择.inner打开了inspector,我可以看到DOM。对我来说一切都很好。这是动画。