5

我正在尝试将一个类添加到现有的 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 也已经出现。

如果有人可以帮助我，那就太好了。

4

3 回答 3

4

你的结束标签应该是</script>

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

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

在这里提琴

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

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

在这里提琴

于 2011-10-11T22:24:08.713 回答
1

after()不接受回调。

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

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

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

于 2011-10-11T22:20:01.963 回答
0 
$(document).ready(function(){
  $(".entry").click(function(){
     $('#content').addClass("col2").after('<div class="box col2">test</div>').slideDown();
  });
});

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

一些文档链接：

于 2011-10-11T22:20:58.607 回答