JQUERY, предварительно ожидающий LI к УЛ. с анимацией

У меня есть УЛ., и я работаю для динамичного добавления нового LI к вершине УЛ. с некоторой анимацией.

У меня есть следующее до сих пор, которое работает хорошо:

$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");

#container УЛ.

Проблема с вышеупомянутым, это, скрывает всю УЛ. и затем двигает всю УЛ. вниз, и я просто хочу НОВЫЙ LI, который предварительно ожидался для анимации.

Идеи? thxs

17
задан Nick Craver 21 May 2010 в 14:58
поделиться

1 ответ

Вы можете сделать то, что хотите, немного проще, используя .prependTo() и $(html), например, так:

$('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

Вы можете посмотреть демонстрацию вышеприведенного кода здесь

.prepend() возвращает элемент, к которому вы добавили, а не элемент или элементы, которые были добавлены. Переключение на .prependTo() делает его немного чище и должно дать желаемый эффект, так как вы можете продолжить цепочку на элементах, которые вы предварительно добавили. Кроме того, если вы используете одну и ту же строку много раз, теперь она будет кэшировать фрагмент документа, что также ускорит работу :)

И последнее, если вы делаете это несколько раз, убедитесь, что ID в

  • уникален, иначе вы создадите недействительный HTML, что приведет к нежелательным побочным эффектам.

  • 41
    ответ дан 30 November 2019 в 11:22
    поделиться
    Другие вопросы по тегам:

    Похожие вопросы: