使用.effects时奇怪的jquery行为（）

我试图在div上使用.effect（“bounce”，“slow”），但是又出现了三个div。这个问题很难在文本中解释，所以我在底部包含了一个JSFiddle链接。使用.effects时奇怪的jquery行为（）

我不确定它是否是我的代码，所以我直接从文档复制到JSFiddle的整个源并获得相同的结果。

下面的代码：在Chrome 脚本正常工作在IE8和Firefox

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>effect demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
    <style> 
    div { 
     width: 100px; 
     height: 100px; 
     background: #ccc; 
     border: 1px solid #000; 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head> 
<body> 

<p>Click anywhere to apply the effect.</p> 
<div></div> 

<script> 
$(document).click(function() { 
    $("div").effect("bounce", "slow"); 
}); 
</script> 

</body> 
</html>

测试......所以这是Chrome错误？

来源

2012-12-04 Jon Tan

显然，chrome在页面中添加了额外的div，然后将css样式和动画应用于所有div元素。它看起来只有1个div，但浏览器插入了它自己的一对。

我改变了代码，所以它只会影响.box类，一切按预期工作。

这是新的代码在所有浏览器的工作原理：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>effect demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
    <style> 
    .box { 
     width: 100px; 
     height: 100px; 
     background: #ccc; 
     border: 1px solid #000; 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head> 
<body> 

<p>Click anywhere to apply the effect.</p> 
<div class= 'box' ></div> 

<script> 
$(document).click(function() { 
    $(".box").effect("bounce", "slow"); 
}); 
</script> 

</body> 
</html>

来源

2012-12-04 16:38:36

使用.effects时奇怪的jquery行为（）

回答

相关问题