jquery Добавить анимацию css в добавленный элемент

Я попытался создать функцию, которая добавляет элементы, когда страница прокручивается внизу, все идет правильно, если я использую fade, но если я хочу заменить fade на анимацию css (addclass), это влияет все элементы добавляются и не только последние ...jquery Добавить анимацию css в добавленный элемент

HTML-

<ul class="clearfix" id="item"> 
    <li style="width: 100px; height: 100px; margin: 5px; float: left; background-color: #808080;"></li> 
    ... // same line 
    <li style="width: 100px; height: 100px; margin: 5px; float: left; background-color: #808080;"></li> 
</ul>

Вот мой сценарий

$(function() { 
    var container = $('#item'); 
    var newel = $('#item').html(); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() + $(window).height() == $(document).height()) { 
      $(newel).hide().appendTo(container).fadeIn(1000).addClass('animate'); 
     } 
    }); 
});

вот CSS

.clearfix:before,.clearfix:after { 
     content: " "; /* 1 */ 
     display: table; /* 2 */ 
    } 

    .clearfix:after { 
     clear: both; 
    } 

    .clearfix { 
     zoom: 1; 
    } 

    #item { 
     width: 600px; 
     margin: 0 auto; 
     -webkit-perspective: 1300px; 
     -moz-perspective: 1300px; 
     perspective: 1300px; 
    } 

    #item li.animate { 
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     transform-style: preserve-3d; 
     -webkit-transform-origin: 0 0; 
     -moz-transform-origin: 0 0; 
     transform-origin: 0 0; 
     -webkit-transform: rotateX(-80deg); 
     -moz-transform: rotateX(-80deg); 
     transform: rotateX(-80deg); 
     -webkit-animation: flip .8s ease-in-out forwards; 
     -moz-animation: flip .8s ease-in-out forwards; 
     animation: flip .8s ease-in-out forwards; 
    } 

@-webkit-keyframes flip { 
    100% { -webkit-transform: rotateX(0deg); opacity: 1; } 
} 

@-moz-keyframes flip { 
    100% { -moz-transform: rotateX(0deg); opacity: 1; } 
} 

@keyframes flip { 
    100% { transform: rotateX(0deg); opacity: 1; } 
}

жаль английски, любая помощь будет оценена

источник

2013-07-12 Cino

Где #Item элемент? – aldux

Вы имеете в виду что-то вроде этого? Демо: http://jsfiddle.net/mzCtc/ –

спасибо за ваши быстрые ответы, но это не то, что я имею в виду ... мне нужно добавить элементы с этой анимацией css ... – Cino

Используйте это, чтобы добавить новый элемент:

$('<li>').appendTo(container).addClass('animate');

Sample fiddle

источник

2013-07-12 23:02:29

jquery Добавить анимацию css в добавленный элемент

ответ

Смежные вопросы