jQuery动画效果(显示和隐藏)(以“滑动”的方式显示)(淡入淡出)

た入场券 2022-05-17 11:29 256阅读 0赞

jQuery实现动画效果？

1) 显示和隐藏
       show()：显示
       hide()：隐藏
       togger()：显示和隐藏的组合

<script type="text/javascript"> $(function(){ $("tr:even").css("background-color","gray").eq(1).css("background-color","red");//设置tr的偶数的背景颜色，同时设置迷醉的背景颜色 $("tr:gt(4)").hide(); $(".more").click(function(){ //$("tr:gt(4)").show(); $("tr:gt(4)").toggle();//点1下隐藏，再点1下显示 }); }); </script>
       </head>
    
       <body>
            <h3>乐淘，发现更多生活，快乐就在你身边...</h3>
            <h4>近期热门......<a href="#" class="more">（更多）</a>
            <table width="800px">
                <tr><td>语言之庭</td></tr>
                <tr><td>斯托克</td></tr>
                <tr><td>迷醉</td></tr>
                <tr><td>巨人携手皆可</td></tr>
                <tr><td>副作用</td></tr>
                <tr><td>血肉之躯</td></tr>
                <tr><td>7号房的礼物</td></tr>
                <tr><td>惊声笑</td></tr>
            </table>
            <a href="#">更多排名</a>
       </body>

2) 以“滑动”的方式显示
       slidedown():向下增大
       slideup()：向上减少

<script type="text/javascript"> $(function(){ $("h2").click(function(){ $("#div1").slideUp("slow"); }); $("h3").click(function(){ $("#div1").slideDown("slow"); }); }); </script>
        </head>
        <body>
            <h2>向上</h2>
            <h3>向下</h2>
            <div id="div1" style="width: 200px;">
            <p>
                极域课堂管理系统软件 使您可以管理教室、与学生相互沟通，以及为个人提供帮助，坐在计算机旁即可完成所有这些工作。
                使用 极域课堂管理系统软件，您可以：
            </p>
    
            </div>
        </body>

3) 淡入淡出
       fadeIn：淡入效果
       fadeout：淡出效果

<script type="text/javascript"> $(function(){ $("h2").click(function(){ $("#div1").fadeIn(2000); }); $("h3").click(function(){ $("#div1").fadeOut("slow"); }); }); </script>
        </head>
        <body>
            <h2>淡入</h2>
            <h3>淡出</h2>
            <div id="div1" style="width: 200px;">
            <p>
                极域课堂管理系统软件 使您可以管理教室、与学生相互沟通，以及为个人提供帮助，坐在计算机旁即可完成所有这些工作。
                使用 极域课堂管理系统软件，您可以：
            </p>
    
            </div>
        </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery学习之路Part4：animate动画(隐藏/显示、淡入淡出、滑动、自定义动画、动画队列、停止动画)

一、隐藏/显示 1、显示 show([速度],[回调函数]) 例：显示所有p元素 $("p").show(); 2、隐藏

谁借莪１个温暖的怀抱￠/ 2023年07月12日 08:42/ 0 赞/ 10 阅读

相关 jQuery显示隐藏效果、滑动效果、淡入淡出效果、animate

jQuery效果显示隐藏效果 show()、hide()、toggle() show()显示效果 show([speed,[easing],[fn

曾经终败给现在/ 2023年01月02日 14:26/ 0 赞/ 185 阅读

相关 Jquery动画之显示和隐藏(普通、滑动、淡入淡出)

以下列举了三种jquery的显示和隐藏的动画方式，大家可以直接复制，取消注释进行查看； <!DOCTYPE html> <html lang="en">

太过爱你忘了你带给我的痛/ 2023年01月01日 01:59/ 0 赞/ 162 阅读

相关 jQuery 之隐藏显示与淡入淡出效果(三)

jQuery 效果- 隐藏和显示通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： $(selector).hide(spe

Love The Way You Lie/ 2022年07月20日 15:23/ 0 赞/ 216 阅读

相关 jQuery效果之隐藏与显示、淡入淡出、滑动、回调

1. 隐藏与显示通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,可以使用 toggle() 方法来切换 hide() 和

本是古典何须时尚/ 2022年06月14日 10:09/ 0 赞/ 244 阅读

相关 jQuery动画效果(显示和隐藏)(以“滑动”的方式显示)(淡入淡出)

jQuery实现动画效果？ 1) 显示和隐藏 show()：显示 hide()：隐藏 togger()：显示和隐藏的组合

た入场券/ 2022年05月17日 11:29/ 0 赞/ 257 阅读

相关 jQuery动画效果——淡入淡出

-------------------- 任务描述本关任务：掌握jQuery常见的动画效果——淡入淡出。效果图如下： ![206413][] 相关知识为了完成本关

桃扇骨/ 2022年04月05日 13:20/ 0 赞/ 351 阅读

相关 Jquery------淡入淡出效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淡入淡

今天药忘吃喽~/ 2021年12月10日 10:04/ 0 赞/ 383 阅读

相关原生javasript实现搜索框淡入淡出显示隐藏的效果

搜索框淡入淡出显示隐藏效果演示 ![在这里插入图片描述][2019072516203223.gif] javascript部分代码 <!-- 搜索框显示隐

刺骨的言语ヽ痛彻心扉/ 2021年11月22日 07:00/ 0 赞/ 272 阅读

相关 jQuery 效果 - 淡入淡出滑动的方法

jQuery Fading 方法通过 jQuery，您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法： fadeIn() 淡入

小鱼儿/ 2021年09月15日 07:38/ 0 赞/ 360 阅读