Jquery: как объединить addCLass () после () и слайд-даун () - PullRequest
Новая
       30

Jquery: как объединить addCLass () после () и слайд-даун ()

4 голосов
/ 12 октября 2011

Я пытаюсь добавить класс к существующему контейнеру 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 уже появляется, даже если предыдущая функция еще не завершена.

Было бы неплохо, если бы кто-то мог мне помочь.

Ответы [ 3 ]

3 голосов
/ 12 октября 2011

Ваш закрывающий тег должен быть </script>

Кроме того, желаемый эффект может быть следующим: 

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

Fiddle здесь

Редактировать: Исходя из вашего комментария, я думаю, что, возможно, вы хотите это: 

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

Fiddle здесь

1 голос
/ 12 октября 2011

after() не принимает обратный вызов.

Вместо этого вам необходимо создать новый объект jQuery для нового элемента, вызвать slideDown() и передать его after().
Например: 

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

Очевидно, это будет работать только для элементов, с которыми действительно работает slideDown().

0 голосов
/ 12 октября 2011 
$(document).ready(function(){
  $(".entry").click(function(){
     $('#content').addClass("col2").after('<div class="box col2">test</div>').slideDown();
  });
});

Это должно сработать..addClass() принимает только один вход, а .after() не принимает функцию обратного вызова.Однако в приведенном выше примере класс будет добавлен и HTML будет добавлен до вызова функции .slideDown().

Некоторые ссылки на документацию:

...