JQuery Slideup/Down Добавить вопрос

$(".item").hover(
  function () {
    $(this).slideDown().append(
            $("<div class=\"attending\">Yes/No</div>")
        );
  }, 
  function () {
    $(this).find("div:last").slideUp().remove();
  }
);

Я использую приведенный выше код для добавления div в нижнюю часть элемента при перевертывании. У меня есть несколько .item divs, каждый из которых прикладывает их к ним при опрокидывании, но по какой-то причине я не могу выполнить работу с slidedown/up.

Любые идеи?

Ответ 1

$(".item").hover(
    function () {
        var answer = $("<div class=\"attending\">Yes/No</div>").hide();
        answer.appendTo($(this)).slideDown();
    }, 
    function () {
        $(this).find("div:last").slideUp("normal", function() {
            $(this).remove();
        });
    }
);

Он не скользит вниз!

Вы добавили неправильного дочернего элемента в неправильный элемент, и вы забыли сначала скрыть элемент.

Он не скользит вверх!

Эта строка начинает разворачиваться, но не дожидаться завершения анимации и удаления элемента.

$(this).find("div:last").slideUp().remove()

Ответ 2

Интуитивно я хочу сказать, что вы склеиваете эффект слайда на неправильном элементе. Он называется .list, а не div.attending, который является полем, который я предполагаю, что вы хотите появиться.

Ответ 3

попробовать

$(".item").hover(
  function () {
    $(this).append(
        $("<div class=\"attending\">Yes/No</div>").hide();
    ).find("div:last").slideDown();
  }, 
  function () {
    $(this).find("div:last").slideUp("normal", function() {
      $(this).remove();
    });
  }
);

Ответ 4

Я столкнулся с подобной проблемой. использовал .append(); попробовал функции обратного вызова, но не работал вообще. Итак, сделал трюк и преуспел. Возьмите короткий вид. вот шаги -

при добавлении содержимого; возьмите переменную и увеличивайте ее значение при каждом вызове блока append-function.
Установка идентификатора с этой переменной для этого элемента и сохранение этого скрытого.

function add_more_charge() { var i = $("#store_id_value").val(); var id = 'some_id_'+i; var str= '<div style="display:none" id="'+id+'">...............</div>'; $("#store_id_value").val(++i); $("#additional_charges").append(str); $("#"+id).slideDown(); }

здесь, внутри этого - <input type="hidden" id="store_id_value" value="2" /> значение сохраняется и увеличивается при каждом вызове.

Мы можем генерировать случайные числа. Использование глобальных переменных также будет хорошим вариантом.

Ответ 5

$(".item").hover(
  function () {
    var content = $(this).append($("<div class=\"attending\">Yes/No</div>")).hide();
    $('.attending').last().slideDown();
  }, 
  function () {
    $(this).find(".attending").last().slideUp("normal", function() {
      $(this).remvove();
    });
  }
);

Попробуйте это немного взломать, но выполняет свою работу.