Question

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

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

以下是代码：

<!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上测试过脚本在ie8和firefox上正常工作......所以这是一个chrome bug吗？

Answer 1

显然，chrome在页面中添加了额外的div，然后将css样式和动画应用于所有div元素。它看起来只有1个div，但是浏览器已经插入了几个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>

使用.effects（）时的特殊Jquery行为

1 个答案: