Jquery：如何结合addCLass() after() 和slideDown()

发布于 2024-12-09 08:22:57 字数 421 浏览 1 评论 0原文

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

如果有人能帮助我就好了。

原文

I'm trying to add a Class to an existing div container and insert a new div (on success) below the existing one.

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

Unfortunately this code doesn't work correctly. The slideDown function doesn't work and the new div does already appear even if the previous function hasn't already finished.

Would be nice if someone could help me.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

神经大条 2024-12-16 08:22:57

您的结束标记应该是

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

$(".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);
});

在这里摆弄

Your closing tag should be </script>

Also, the effect that you want may be the folowing:

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

Fiddle here

Edit: Based on you comment, I guess that maybe you want this:

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

Fiddle here

回复收藏 0 原文

旧时浪漫 2024-12-16 08:22:57

after() 不接受回调。

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

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

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

after() doesn't take a callback.

Instead, you need to create a new jQuery object for the new element, call slideDown() on it, and pass it to after().
For example:

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

Obviously, this will only work for elements that slideDown() actually works on.

回复收藏 0 原文

感情洁癖 2024-12-16 08:22:57

$(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/
slipDown() - http://api.jquery.com/slideDown/

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

This should do the trick. .addClass() only takes one input and .after() does not accept a callback function. However with the above example the class will be added and the html will be appended before the .slideDown() function is called.

Some Documentation Links: