jQuery自定义动画

语法结构

animate(params, speed, callback);

• params： 包含样式属性的映射。
• speed：速度参数，可选。
• callback：在动画完成执行的函数，可选。

实例

要实现一个功能，点击元素时，每次元素在300ms内向右移动100px。

点击前：

点击后：

jQuery：

                $this.children('li').click(function(){
                    $(this).animate({left: "+=100px"},300);
                    console.log("ccc");

                }); 

html：

                    <ul class="tabs">
                        <li class="tabs-li">
                            <a href="#" class="tab-li-a">欢迎使用</a>
                        </li>
                    </ul> 

css:

.tabs li {
    position: relative;
    width: 100px;
}
.tabs .tab-li-a {
    display: block;
    margin: 1px;
    float: left;
    text-decoration: none;
    color: white;
    background-color: #0099cc;
    padding: 5px 1em;
    border: 1px solid #a1acb8;
}

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>

版权声明：本文为博主原创文章，未经博主允许不得转载。