0

I tried to create a function that adds elements when the page scroll at the bottom, all goes right if i use fade, but if i wanna replace fade with css animation (by addClass) it affects all the elements appended and not only the latest...

the 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>

Here is my script

$(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');
        }
    });
});

here is the 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; }
}

sorry for english, any help will be appreciated

4

1 回答 1

4

使用它来添加新元素：

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

样品小提琴

于 2013-07-12T23:02:29.900 回答