>  기사  >  웹 프론트엔드  >  실용적인 JQuery 대기열 애니메이션 데모

실용적인 JQuery 대기열 애니메이션 데모

一个新手
一个新手원래의
2017-09-09 10:52:501125검색

할 말이 별로 없습니다. 코드만 게시하세요

<!-- css -->ul{
    list-style: none;   
}
li{
    font-size: 25px;
    float: left;
    color:grey;
    position: relative;
    margin: 10px;
    opacity: 0;
    left: -200px;
}<!-- html --><ul>
    <li>欢</li><li>迎</li><li>来</li><li>到</li><li>这</li><li>里</li></ul><!-- js -->$("li").last().animate({
            opacity: &#39;1&#39;,
            left: &#39;200px&#39;
        },400,function fn(){
            $(this).prev().animate({
                opacity: &#39;1&#39;,
                left: &#39;200px&#39;
            },400,fn)
        })
        setTimeout(function(){
            $("li").last().animate({
                opacity: &#39;0&#39;,
                left: &#39;400px&#39;
            },400,function fn(){
                $(this).prev().animate({
                    opacity: &#39;0&#39;,
                    left: &#39;400px&#39;
                },400,fn)
            })
        },2500)

렌더링:
실용적인 JQuery 대기열 애니메이션 데모

위 내용은 실용적인 JQuery 대기열 애니메이션 데모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.