У меня есть УЛ., и я работаю для динамичного добавления нового 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
Вы можете сделать то, что хотите, немного проще, используя .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, что приведет к нежелательным побочным эффектам.