jq-效果

1.渐变方法

1.显示和隐藏

//显示和隐藏
        var btns = document.querySelectorAll('button');
        //隐藏方法
        btns[0].onclick = () => {
            jQuery('div').hide();
        }
        //显示方法
        btns[1].onclick = () => {
            jQuery('div').show();
        }
        //显示和隐藏的切换
        btns[2].onclick = () => {
            jQuery('div').toggle();
        }

        //每个方法都有两个参数：完成所用的事件（单位毫秒），完成后执行的事件
        //在两个参数之间可以加入一个字符串表示缓动的类型，jq自身提供了"linear" "swing"，其他的需要使用插件

2.淡入淡出

//淡入淡出
        var btns = document.querySelectorAll('button');
        //淡入
        btns[0].onclick = () => {
            jQuery('div').fadeIn();
        }
        //淡出
        btns[1].onclick = () => {
            jQuery('div').fadeOut();
        }
        //淡入淡出切换
        btns[2].onclick = () => {
            jQuery('div').fadeToggle();
        }
        //这三个方法与上面的三个方法有相同的参数
        //变为指定的透明底
        btns[3].onclick = () => {
            jQuery('div').fadeTo(1000,0.4);
        }
        //这个方法有三个参数：完成所需事件（单位毫秒，必需），目标透明度（必需），完成后执行的事件。

3.滑动

//滑动
        var flip = document.getElementById('flip');
        var flip2 = document.getElementById("flip2");
        var span = document.querySelector("span");
        //向下滑动
        flip.onclick = () => {
            jQuery('#panel').slideDown();
        }
        //向上滑动
        flip2.onclick = () => {
            jQuery('#panel').slideUp();
        }
        //向上和向下切换
        span.onclick = () => {
            jQuery('#panel').slideToggle();
        }
        //参数与之前相同

2.动画

//动画
        var btn = document.querySelector('button');
        btn.onclick = () => {
            jQuery('div').animate({
                height:'100px',
                width:'100px',
            })
            jQuery('div').animate({
                height:'200px',
                width:'200px',
            })
        }
            /* animate方法的  3个参数为：动画（有三个预定义值："show" "hide" "toggle"）可以修改除颜色外的css属性
                                        完成动画所需时间
                                        完成后的事件*/
    

        //停止动画
        //stop（），两个布尔类型参数，第一个表示是否停止之后的动画，第二个表示是否立刻完成当前动画
        

3.注意事项

1.在jq中使用回调函数作为参数时，一定要以函数的形式写入，否则会在动画完成之前执行函数
2.jq可以写成长链，一条接着一条执行，并且可以换行