как исчезнуть в недавно добавленном div с помощью jquery? - PullRequest
Новая
       17

как исчезнуть в недавно добавленном div с помощью jquery?

0 голосов
/ 10 марта 2012

У меня есть этот предмет, который входит в DOM внутри div.

Я пытаюсь добавить этот элемент, постепенно добавляя его, и я выбрал этот подход. Но это не похоже на работу 

<div id="messages" class="comm">
    <div class="message">00:50:09</div>
    <div class="message">00:50:04</div>
    <div class="message">00:49:04</div>
</div>​

var out = '';
out += '<div class="curent">testingg</div>';

$('.comm').prepend(out);
$('.messages').css({'opacity':'1'});
$('.curent').removeClass('messages').addClass('message');​

.messages{
    opacity: 0;
}​

Вы также можете увидеть код в jsfiddle .

Есть идеи?

Thanlks

Ответы [ 2 ]

2 голосов
/ 10 марта 2012

Как насчет этого: 

$('.curent').hide().fadeIn();

Установка непрозрачности для того или иного значения не приводит к исчезновению, поскольку она немедленно изменяется со старого значения на новое значение.Вы можете использовать метод .animate() для перехода между старой и новой прозрачностью, но jQuery уже имеет .fadeIn() method, чтобы сделать это за вас.Просто .hide() элемент непосредственно перед вызовом .fadeIn().

Обратите также внимание, что изменение одного и того же свойства несколько раз в пределах одного и того же кодового блока не приведет к анимации, которую может видеть пользовательпотому что весь блок будет выполняться до того, как браузер обновит страницу.Так что .removeClass('messages').addClass('message') не имеет заметного эффекта, если у элемента (ов) не было класса 'messages' для начала.Вам необходимо использовать анимацию на основе setTimeout() (это то, что используют методы анимационных эффектов jQuery ), чтобы браузер мог обновлять страницу между изменениями свойств.

0 голосов
/ 10 марта 2012

Вы сделали пару вещей неправильно.

Вы можете использовать JQuery.fadeIn (); , но теперь он ожидает, что ваш элемент будет display:none, поэтому вы должны изменить свой CSS. Я также добавил обработчик щелчков в моей демонстрации ниже, чтобы вы могли правильно увидеть эффект и настроить его. 

var out = '';
out += '<div class="curent">testingg</div>';
$('.comm').prepend(out);
$('#messages').fadeIn("slow");//<<fade in from display:none
// ^^ note: you needed to target id="messages" not class.
$('.curent').removeClass('messages').addClass('message');

И ваш css: 

#messages{
 display:none;
}​

См. Рабочую демонстрацию (здесь добавлен код для события click):
http://jsfiddle.net/2EJdy/8/

...