jQuery效果2

Posted 2020-10-22 greenpark

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