jQuery动画的显示和隐藏

最新推荐文章于 2024-03-31 03:12:42 发布
最新推荐文章于 2024-03-31 03:12:42 发布
阅读量352 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhanbin/article/details/77916143
版权

  jQuery动画的显示和隐藏

 用DW工具编写的，而且要导入js库

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画</title>
    <script src="../jquery-2.1.0.js"></script>
    <script src="../jquery-color-master/jquery.color.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                //$("img").hide();    
                $("img").hide(2000,function(){
                    var size = $("img:hidden").length;
                    alert("动画隐藏了"+size+"个");    
                });    
            });
            $("#btn2").click(function(){
                //$("img").hide();    
                $("img").show(2000,function(){
                    var size = $("img:visible").size();
                    alert("动画显示了"+size+"个");    
                });    
            });    
            $("#btn3").click(function(){
                //$("img").hide();    
                $("img").toggle(2000,function(){
                    
                });    
            });
            
            $("#btn4").click(function(){
                //$("img").hide();    
                $("img").slideUp(2000,function(){
                    var size = $("img:hidden").length;
                    alert("动画隐藏了"+size+"个");    
                });    
            });
            $("#btn5").click(function(){
                //$("img").hide();    
                $("img").slideDown(2000,function(){
                    var size = $("img:visible").size();
                    alert("动画显示了"+size+"个");    
                });    
            });    
            $("#btn6").click(function(){
                //$("img").hide();    
                $("img").slideToggle(2000,function(){
                    
                });    
            });
            
            $("#btn7").click(function(){
                //$("img").hide();    
                $("img").fadeOut(2000,function(){
                    
                });    
            });
            $("#btn8").click(function(){
                //$("img").hide();    
                $("img").fadeTo(1000,0.01,function(){
                    
                });    
            });
            
            $("#go").click(function(){
                  $("#block").animate({
                    width: "90%",
                    height: "100%",
                    fontSize: "10em"
                    }, 1000 )
                    .animate({
                        borderWidth: 10,
                        opacity:0.2,
                        backgroundColor:"red"
                    },1000);
                });
                
                
                
                $("#right").click(function(){
                  $(".block2").animate({left: '+50px'}, "slow");
                });
                
                $("#left").click(function(){
                  $(".block2").animate({left: '-50px'}, "slow");
                });
                
                
                $("#btn9").click(function(){
                    $("#block").stop(true,true);
                });
            });
    </script>
</head>

<body>
    <button id="btn1">隐藏</button>
    <button id="btn2">显示</button>
    <button id="btn3">显隐切换</button>
    <button id="btn4">隐藏2</button>
    <button id="btn5">显示2</button>
    <button id="btn6">显隐切换2</button>
    <button id="btn7">透明2（淡出）</button>
    <button id="btn8">指定透明度</button>
    
    <br/><br/><img src="f.jpg.png" style="width:200px; height:200px" />
    
    <button id="go"> Run</button>
    <button id="btn9">停止动画</button>
    <div id="block" style="border:1px solid #33F; background-color:#FFC">Hello!</div>
    
    <center>
        <button id="left">«</button> <button id="right">»</button>
        
        <div class="block2" style="position:absolute; width:50px; height:50px; background-color:#CF9">asdf</div>
    </center>
</body>
</html>


scvas
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
09-jQuery-动画-显示和隐藏元素
记录java学习日常~
05-24 2645
在 show() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素显示出来，动画完成后执行回调函数。在 slideUp() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素收缩，动画完成后执行回调函数。在 hide() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型隐藏元素，动画完成后执行回调函数。
JQuery动画操作
weixin_70676044的博客
10-16 886
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()；//属性值的变化，时间，动画效果，动画完成之后的回调函数});
【jQuery动画】显示与隐藏效果
m0_55394328的博客
10-03 2654
在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
前端提高篇(九十八)：jQuery动画：显示与隐藏动画，简单聊聊2024年前端开发的现状和思考
m0_60666921的博客
03-31 421
)：滑动向下显示：滑动向上隐藏：通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。1.给按钮绑定点击事件，点击时，box从上到下，滑动显示出来：})效果：2.给按钮绑定点击事件，点击时，box从下到上，滑动隐藏：此时初始状态是box显示，;})效果：3.给按钮绑定点击事件，点击前，如果box显示，点击后box以slideUp的方式隐藏；
jQuery动画
m0_57774967的博客
07-17 580
参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”它定义了产生动画的CSS属性，可以同时设置多个此类属性。...
jQuery动画的显示与隐藏效果
qinge_Crazy的博客
07-19 360
　　jQuery中用于控制元素显示和隐藏效果的方法如表1所示。 　　表1 控制元素的显示和隐藏 　　在表1中，参数speed表示动画的速度，可设置为动画时长的毫秒值(如1000)，或预定的3种速度(slow、fast和normal);参数easing表示切换效果，默认效果为swing，还可以使用linear效果;参数fn表示在动画完成时执行的函数。 　　下面通过代码演示show()、hide()和toggle()的简单使用。 　　<style> 　　div { width: 150p
jQuery中的动画
m0_68169119的博客
08-15 2437
jQuery中的动画
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
10-23
主要介绍了jQuery动画显示和隐藏效果实现方法,并附带了demo源码供读者下载参考,涉及jQuery操作图片的显示,隐藏及淡入淡出等效果,需要的朋友可以参考下
jQuery的显示和隐藏方法与css隐藏的样式对比
10-26
2. `show()`: 类似于`hide()`，`show()`用于显示隐藏的元素，同样可以接受时间参数来控制动画速度。它可以让隐藏的元素在指定时间内逐渐出现。 3. `slideToggle()`: 这个方法会在元素当前隐藏时滑动显示，显示时...
JQuery DIV 动态隐藏和显示的方法
10-22
总结起来，JQuery 的 DIV 动态隐藏和显示方法是通过`show()`、`hide()`或`toggle()`函数结合事件处理来实现的。这种方法使得开发者可以轻松地控制网页元素的可见性，提高网页的交互性和用户体验。在实际项目中，可以...
jQuery隐藏和显示效果实现
11-28
本文将详细讲解如何使用 jQuery 实现隐藏和显示 HTML 元素的效果，以及相关的 `hide()`、`show()` 和 `toggle()` 方法。 ### 1. `hide()` 方法 `hide()` 方法用于隐藏选定的 HTML 元素。基本语法如下： ```...
jquery滑动显示和隐藏图片效果特效代码
03-20
本教程将关注一个特定的应用场景：使用jQuery实现滑动显示和隐藏图片的效果。这种特效通常用于创建动态用户界面，提高用户体验。 首先，`index.html`是项目的主要网页文件，它包含了HTML结构，用于展示页面内容。在...
jQuery动画的显示与隐藏效果！
xiaoxijinger的博客
07-20 441
jQuery中用于控制元素显示和隐藏效果的方法如表1所示。 表1 控制元素的显示和隐藏 在表1中，参数speed表示动画的速度，可设置为动画时长的毫秒值(如1000)，或预定的3种速度(slow、fast和normal);参数easing表示切换效果，默认效果为swing，还可以使用linear效果;参数fn表示在动画完成时执行的函数。 下面通过代码演示show()、hide()和toggle()的简单使用。 <style> ```python div { width: 150px; hei
Educoder/头歌JAVA——jQuery动画
舟舟的博客
12-12 4160
动画是使元素实现从一种样式逐渐变化为另一种样式的效果。jQuery动画包括隐藏/显示，淡入/淡出，上滑/下滑，自定义动画等效果。 本实训的主要内容是jQuery动画，从动画效果的方法到自定义动画，可以创建自己想要的动画效果。
jQuery
扮猪吃老虎二号的博客
12-26 550
一、jQuery入门 jQuery是一个JavaScript脚本库，通过&lt;script&gt;在HTML头部引入即可。 两种引入方式： 通过CDN引入：&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt; 从 http://jquery.com/download/ 下载jQuery库，根据文件位置引入即可。 基本...
jQuery入门第二章（显示隐藏动画）
m0_56344602的博客
09-06 882
基本概念 隐藏其实就是 display:none; 显示可以有很多种：display:block flex inline-block，block 最常见。 基础显示隐藏 以上方法传入时间后才有动画动画效果，不传入时间没有动画效果。 淡入淡出显示隐藏 就是透明度的变化。 没有传入时间也有动画效果，默认值是 400 毫秒 滑动显示隐藏 高度的变化 自定义动画 核心方法 .animate( 样式对象, 时间, 回调函数 ) 被称为动态的 .css( ) 参考代码 ...
jQuery动画（显示隐藏，淡入淡出，滑动）
TangJing_的博客
07-30 2789
目录 分类 基本动画函数 显示元素 交替显示隐藏 滑动效果 向上收缩效果 向下展开效果 交替伸缩样式 淡入淡出效果 淡入效果 淡出效果 自定义不透明度 jQuery的动画函数 分类 基本动画函数：既有透明度渐变，又有滑动效果。是最常用的动画效果函数 滑动动画函数：仅使用滑动渐变效果 淡入淡出动画函数：仅使用透明度渐变效果 基本动画函数 显示元素 jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数，他的动画效果是向左上..
jQuery的动画的显示和隐藏特效
weixin_63719049的博客
03-22 1589
jQuery的动画的显示和隐藏特效 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #aa { width: 200px; height: 200px; background-color: red; } .abc { transform: rotat
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
jquery显示隐藏盒子
05-25
如果您想使用动画效果来显示和隐藏盒子，可以使用`fadeIn()`和`fadeOut()`方法，例如： ``` $(document).ready(function(){ $("#toggleBtn").click(function(){ $("#box").fadeToggle(); }); }); ``` 在上面的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值