码迷,mamicode.com
首页 > Web开发 > 详细

jQuery效果2

时间:2018-01-28 20:53:45      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:height   函数   hidden   false   情况   动画   class   blog   show   

<script type="text/javascript">
        //动画jq开始
        /*
         * 定义动画
         * animate({json格式定义css},"time"),可以使用预定义的值show、hide、toggle注意当有margin-left情况填marginLeft形势
         * */
        $(‘.animate‘).click(function () {
            $(‘.animation‘).animate({
                marginLeft: ‘1000px‘,
                marginTop: ‘0px‘,
            }, 3000);
            $(‘.animation‘).animate({
                marginLeft: ‘1000px‘,
                marginTop: ‘0px‘,
                fontSize: ‘50px‘,
            }, 1000);
            $(‘.animation‘).animate({
                height: ‘toggle‘,
            }, 1000);
        });
        /*
         * 停止动画
         * stop(stopAll,goToEnd)stopAll清除动画队列停止,goToEnd立刻完成所有动画队列停止,不设置默认false设置需要加true
         * */
        $(‘.stop‘).click(function () {
                $(‘.animation‘).stop(true, true);
            }
        );
        //停止所有
        $(‘.stopall‘).click(function () {
            $(‘.animation‘).stop(true);
        });
        //立刻完成动画停止
        $(‘.gotoedn‘).click(function () {
            $(‘.animation‘).stop(true, true);
        });
        /*
        * 回调函数callback
        *在动画完成之后才执行的函数
        * */
        $(document).ready(function () {
            $(".button").click(function () {
                $(".p").hide(1000, function () {
                    alert("The paragraph is now hidden");
                });
            });
        });
        /*
        * Chaining方法可以一个事件同时链接多个动作
        * */
        $(‘.chaining‘).click(function () {
            $(‘.p1‘).hide(1000).fadeTo(0.55,1000);
            }
        );
    </script>

jQuery效果2

标签:height   函数   hidden   false   情况   动画   class   blog   show   

原文地址:https://www.cnblogs.com/Greenpark/p/8372173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!