Question

我正在尝试将一个Class添加到现有的div容器中，并在现有的div下面插入一个新的div（成功）。

<script>
$(document).ready(function(){
  $(".entry").click(function(){
     $('#content').addClass("col2",1000).after('<div class="box col2">test</div>', function(){
        $(this).slideDown();
     });
  });
});
<script>

不幸的是，此代码无法正常运行。 slideDown函数不起作用，即使上一个函数尚未完成，新的div也已经出现。

如果有人可以帮助我会很好。

Answer 1

结束标记应为</script>

此外，您想要的效果可能如下：

$(".entry").click(function() {
    $('#content').addClass("col2").after('<div class="box col2">test</div>');
    $('.box:last').hide().show(300);
});

Fiddle here

编辑：根据您的评论，我想也许您想要这个：

$(".entry").click(function() {
    $('#content').addClass("col2");
    setTimeout(function() {
        $('#content').after('<div class="box col2">test</div>');
        $('.box:last').hide().show(300);
    }, 500);
});

Fiddle here

Answer 2

after()不接受回电。

相反，您需要为新元素创建一个新的jQuery对象，在其上调用slideDown()，然后将其传递给after()。
例如：

$(...).after(
     $('<div class="box col2">test</div>').slideDown()
);

显然，这只适用于slideDown()实际工作的元素。

Answer 3

$(document).ready(function(){
  $(".entry").click(function(){
     $('#content').addClass("col2").after('<div class="box col2">test</div>').slideDown();
  });
});

这应该可以解决问题。 .addClass()只接受一个输入，.after()不接受回调函数。但是，通过上面的示例，将添加类，并在调用.slideDown()函数之前附加html。

一些文档链接：

addClass（） - http://api.jquery.com/addclass/
after（） - http://api.jquery.com/after/
slideDown（） - http://api.jquery.com/slideDown/

Jquery：如何在（）和slideDown（）之后组合addCLass（）

3 个答案: