jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务

jQuery笔记合集
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
JQ的特效函数

本次的内容相当于是之前的JS的运动或CSS的过渡效果。

特效函数的共同特点:都是在显示和隐藏一个元素。

即:

style.display="block" 
style.display="none"
一、显示和隐藏的特效函数

show、hide是在特定时间内同时改变了该元素的宽度、高度、透明度。让其具有过渡效果(动画效果)

  1. show

    a、不添加参数

    $("元素").show();
    

    说明:相当于是 JS的 元素.style.display=“block”;
    没有特效,仅仅只是显示该元素

    b、添加参数

    $('元素').show(时间参数);
    

    说明:动画效果来显示该元素

    参数说明:写毫秒或单词(下面的方法也一样)

    1. 毫秒: 200、400、800、1000
    2. 英文单词:“fast”、“normal”、“slow”
  2. hide

    a、不添加参数

    $("元素").hide();//
    

    说明:相当于是 JS的 元素.style.display=“none”;
    没有特效,仅仅只是显示该元素

​ b、添加参数

$("元素").hide(时间参数);

说明:动画效果来显示该元素
参数说明:写毫秒或单词

  1. toggle

    toggle=show+hide;
    切换显示或隐藏元素;
    用法跟上面一样。
    
二、滑动显示和隐藏一个元素

只改变该元素的高度。

  1. 显示 slideDown

    //1、不添加参数
    $("元素").slideDown();
    
    //2、添加参数
    $('元素').slideDown(时间参数);
    
  2. 隐藏 slideUp

    //1、不添加参数
    $("元素").slideUp();//
    
    //2、添加参数
    $('元素').slideUp(时间参数);
    
  3. 隐藏+显示 slideToggle

    $('div').slideToggle('slow');//如果div元素是显示,则隐藏,否则显示
    
三、淡入淡出(显示和隐藏元素)

只改变该元素的透明度。淡入:显示、淡出:隐藏。

  1. 淡入 fadeIn

    用法同上

  2. 淡出 fadeOut

    用法同上

  3. 淡入淡出 fadeToggle

    用法同上

四、特效的链式操作

可以给同一个元素添加多个特效效果。

$('div').hide(500).fadeIn('slow').fadeOut(300);

相关单词:

  1. show
  2. hide
  3. toggle
  4. is
  5. visible
  6. slideDown
  7. slideUp
  8. slideToggle
  9. fadeIn
  10. fadeOut
  11. fadeToggle

案例、笔记、作业:imqd.cn/?p=201

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值