5

我正在创建一个 jquery 动画，奇怪的是，当我附加一个新段落时，它会附加两次，只有在附加前 2 个段落时才会出现问题，这可能是一个 jQuery 错误。否则，我希望有人能帮助我。

HTML：

<body>
    <div id="element">
     </div>
</body>​

JavaScript： 

$(function() {
    animation();
});

function animation()
{
   $('<p id="p1">paragraph 1</p>').appendTo('#element');
   $('<p id="p2">paragraph 2</p>').appendTo('#element');
   $('#p1, #p2').fadeOut(600, function(){
       $('#p1, #p2').remove();
       var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
   });
}​

问题在于附加了两次的“第 3 段”！您可以在此处运行代码：http: //jsfiddle.net/jonah13/QLM2s/

谢谢，尤尼斯

4

5 回答 5

6

我不知道为什么其他发现问题的答案被否决，因为他们发现了问题。

这是修复它的代码。请注意，从jQuery 文档开始，从 jQuery 1.6 开始（我假设您正在使用它，因为 jsFiddle 使用的是 1.7.2），您可以使用.promise()：

从 jQuery 1.6 开始，当所有匹配的元素都完成动画时，该.promise()方法可以与该deferred.done()方法结合使用，以对整个动画执行单个回调。

我已经更新了你的小提琴：

$(function() {
   animation();
});

function animation()
{
   $('<p id="p1">paragraph 1</p>').appendTo('#element');
   $('<p id="p2">paragraph 2</p>').appendTo('#element');
   $('#p1, #p2')
     .fadeOut(600)
     .promise().done(function() {
       $('#p1, #p2').remove();
       var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
   });         
}​
于 2012-05-07T07:31:05.600 回答
5

fadeOut()每个匹配选择器的元素都会触发一次提供给的函数。由于选择器返回两个元素，它被触发两次，因此附加了两个段落。

此处修改示例：http: //jsfiddle.net/QLM2s/1/

于 2012-05-07T07:20:57.027 回答
2

问题是第 1 段和第 2 段的淡出：jQuery 正在为您给它的每个选择器执行淡出函数内的代码（在这种情况下，两个段落，所以两个追加）。

于 2012-05-07T07:21:46.400 回答
1

由于 fadeout() 触发两次更好，因此您在追加到 div 之前清空该段落。

试试下面的代码：

$(function() {
 animation();
});
function animation() 
{
 $('<p id="p1">paragraph 1</p>').appendTo('#element');
 $('<p id="p2">paragraph 2</p>').appendTo('#element');
 $('#p1, #p2').fadeOut(600, function(){      
      $('p').empty();
   var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
 });
}
于 2014-09-22T20:18:07.160 回答
-1

这似乎工作正常

$(function() {
   animation();
});

function animation()
{
   $('<p id="p1">paragraph 1</p>').appendTo('#element');
   $('<p id="p2">paragraph 2</p>').appendTo('#element');
   $('#p1').fadeOut(600, function(){
       $('#p1').fadeOut();
      $('#p1, #p2').remove();
      var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
   }

); }​</p>

于 2012-05-07T07:23:30.863 回答