Удаление div и добавление divs

#javascript #jquery #jquery-animate

#javascript #jquery #jquery-анимировать

Вопрос:

Я новичок в jQuery. Я пытаюсь скрыть div, на который я нажал, а затем нажать на 4 соседних с ним divs, используя animate. После этого я хочу добавить еще 4 divs через пробел после выбранного div.

Я пробовал это

Вот мой код

  (function () {
     $('#ccc').on('click', '.box', function () {
         var i = 0;
         $(this).fadeOut().nextAll().slice(0, 4).animate({
             top: '100px'
         }, function () {
             i  ;
             if (i == 4) {
                 $(this).after('<div class="lt box"></div><div class="rt box"></div><div class="lt box"></div><div class="rt box"></div>');
             }
         });

     });

 })();

Вот скрипка:http://jsfiddle.net/ue7Gp/2

Заранее спасибо

Ответ №1:

Это заняло некоторое время, но попробуйте эту СКРИПКУ. Дайте мне знать, если это не желаемая функциональность. Надеюсь, это поможет. Основная проблема с опубликованным вами оригиналом заключалась в том, что сохранялся стиль top: 100px, что вызывало этот пробел.

ОБНОВЛЕНИЕ: Я настроил javascript так, чтобы обратный вызов анимации вызывался только один раз, чтобы вы могли избавиться от своего счетчика.

РЕДАКТИРОВАТЬ 2: Я обновил скрипт и код ниже, чтобы отразить ваш запрос о том, что поле с нажатой кнопкой не удалялось. Я надеюсь, что это поможет

   (function () {
     $('#ccc').on('click', '.box', function (e) {
         var i = 0;
         $(e.currentTarget).fadeOut();
         $(e.currentTarget).nextAll().stop().animate({
            "top": "220px"
         }).promise().done( function () {
                 $(e.currentTarget).after('<div class="lt box"></div>
                 <div class="rt box"></div><div class="lt box"></div>
                 <div class="rt box"></div>').remove();
             $(".box").removeAttr("style");  
         });

     });

 })();



.box {
    width:100px;
    height:100px;
    background-color:red;
    position:relative;
    margin-bottom: 10px;
    float:left;
     margin:5px;
}

#ccc {
    width:220px;
}

1. Спасибо .. но нажатый div не скрывается

2. Я обновил код и скрипту, чтобы отразить ваш запрос на удаление поля при нажатии. Если вы хотите скрыть все поля с щелчками вместо их удаления, дайте мне знать, и я покажу вам, как это сделать. Надеюсь, это поможет.

Ответ №2:

У меня это работает для вас, насколько я понимаю ваш вопрос. Этого должно быть достаточно, чтобы направить вас на правильный путь! Левый и правый поплавки не идеальны, IMO. Надеюсь, это поможет!

Обновленная скрипка:http://jsfiddle.net/ue7Gp/3

JS:

 $('#ccc').on('click', '.box', function () {
    $(this).fadeOut(function(){
        if ($(this).hasClass("lt")){
            var startwith = "lt";
            var endwith = "rt";
        } else {
            var startwith = "rt";
            var endwith = "lt";
        }
        for (x=0; x<2; x  ){
            $(this).parent().prepend($('<div class="'   startwith   ' box"></div><div class="'   endwith   ' box">').hide().fadeIn("slow"));
        }
    });
});