Jquery效果一览

最新推荐文章于 2024-07-30 09:59:07 发布

Byte_Dance

最新推荐文章于 2024-07-30 09:59:07 发布

阅读量249

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

效果
1.基本效果
show()         显示隐藏的匹配元素。
show(speed, [callback]) 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。
(其中slow :600ms normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
hide()   隐藏显示的元素
hide(speed, [callback]) 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。
(其中slow :600ms normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
toggle()        如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
toggle(switch) 括号内传入布尔值,false为不显示,true为显示
toggle(speed, [callback]) 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度
(其中slow :600ms normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
2.滑动效果
slideDown(speed, [callback]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，
在显示完成后可选地触发一个回调函数。(speed 表示毫秒数,其中slow :600ms
normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
slideUp(speed, [callback]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，
在隐藏完成后可选地触发一个回调函数。(speed 表示毫秒数,其中slow :600ms
normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
slideToggle(speed, [callback]) 通过高度变化来切换所有匹配元素的可见性，
并在切换完成后可选地触发一个回调函数。(speed 表示毫秒数,其中slow :600ms
normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
3.淡入淡出效果
fadeIn(speed, [callback]) 通过不透明度的变化来实现所有匹配元素的淡入效果，
并在动画完成后可选地触发一个回调函数。(speed 表示毫秒数,其中slow :600ms
normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
fadeOut(speed, [callback]) 通过不透明度的变化来实现所有匹配元素的淡出效果，
并在动画完成后可选地触发一个回调函数。(speed 表示毫秒数,其中slow :600ms
normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
fadeTo(speed, opacity, [fn]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，
并在动画完成后可选地触发一个回调函数。(speed 表示毫秒数,其中slow :600ms
normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
fadeToggle(speed, [easing), [callback] 通过高度变化来切换所有匹配元素的可见性，
并在切换完成后可选地触发一个回调函数。(speed 表示毫秒数,其中slow :600ms
normal : 400ms fast : 200ms 都需要写在"" 里边 / 右边可以写执行期间的函数)
4.自定义效果
animate(param,[dur],[e],[fn]) 用于创建自定义动画的函数。
animate(params, options) 用于创建自定义动画的函数。
stop([clearQueue], [gotoEnd]) 停止所有在指定元素上正在运行的动画。
delay(duration, [queueName]) 设置一个延时来推迟执行队列中之后的项目。
5.设置
jQuery.fx.off 关闭页面上所有的动画。 jQuery.fx.off = true;

jQuery.fx.interval 设置帧速为 ** 毫秒 jQuery.fx.interval = 100;

点击上边元素 下边元素隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击上边元素 下边元素隐藏</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <h1>php</h1>
    <div>
        php的内容部分!php的内容部分!php的内容部分!php的内容部分!php的内容部分!
php的内容部分!php的内容部分!php的内容部分!php的内容部分!php的内容部分!php的内容部分!
php的内容部分!php的内容部分!php的内容部分!php的内容部分!php的内容部分!php的内容部分!
php的内容部分!php的内容部分!php的内容部分!php的内容部分!php的内容部分!php的内容部分!
php的内容部分!php的内容部分!php的内容部分!
    </div>
    <h1>java</h1>
    <div>
        java的内容部分!java的内容部分!java的内容部分!java的内容部分!
java的内容部分!java的内容部分!java的内容部分!java的内容部分!java的内容部分!
java的内容部分!java的内容部分!java的内容部分!java的内容部分!java的内容部分!
java的内容部分!java的内容部分!java的内容部分!java的内容部分!java的内容部分!
java的内容部分!java的内容部分!java的内容部分!java的内容部分!java的内容部分!
    </div>

    <script>
        // 一 :使用Jquery的toggle方式
        $("h1").click(function(){
            $(this).next().toggle(100);
        });

        // 二:使用变量赋值的方式
        i = 0;
        $("h1").click(function(){
            if(i%2==0){
                $(this).next().hide();
            }else{
                $(this).next().show();
            }
            i++;
        });

        // 三:使用toggle函数的方式,jquery1.8以后不再支持
        $("h1").toggle(
                function(){
                    $(this).next().hide();
                },
                function(){
                    $(this).next().show();
                }
        );
        // 四:使用添加属性的方式
        $("h1").data({"n":0});
        $("h1").click(function(){
            val = $(this).data("n");
            if(val== 0){
                $(this).next().hide();
                $(this).data({"n":1});
            }else{
                $(this).next().show();
                $(this).data({"n":0});
            }
        });

    </script>
</body>
</html>

Byte_Dance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery效果一览

效果 1.基本效果 show() 显示隐藏的匹配元素。 show(speed, [callback]) 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。 (其中slow :600ms normal : 400ms fast : 200ms 都需要写在"" 里边...
复制链接

扫一扫

专栏目录