jQuery学习_动作效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

本文介绍了jQuery中的基本语法和常用效果,包括元素的隐藏、显示、切换、滑动、淡入淡出及动画操作。通过$(selector).action()的方式,可以实现对HTML元素的各种动态效果,例如hide()用于隐藏元素,fadeIn()和fadeOut()实现淡入淡出,slideToggle()执行滑动切换等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jQuery 效果学习中,首先是需要基本的语法:

基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)”查询”和”查找” HTML 元素
jQuery 的 action() 执行对元素的操作

//隐藏和显示
 $(selector).hide(speed,callback);
 $(selector).show(speed,callback); 
  $(selector).toggle(speed,callback); 
 //淡入淡出
 $(selector).fadeIn(speed,callback);
 $(selector).fadeOut(speed,callback);
 $(selector).fadeToggle(speed,callback);
 $(selector).fadeTo(speed,opacity,callback);
 //滑动效果
 $(selector).slideDown(speed,callback);
 $(selector).slideUp(speed,callback);
 $(selector).slideToggle(speed,callback);
 //动画效果
 $(selector).animate({params},speed,callback);
 //其中{params}是必须要设置的参数用于形成动画的CSS属性,例如:
 $("#btn_ani").click(function(){
    $("#div1").animate({
         left:"200px",    //设置左边距距离
         height:"+=150px",  //定义元素相对值
             width:"toggle"  //设置属性动画值
     },"slow",alert("callback"));
});     //callback函数,在当前动画完全执行后才执行

 //停止动画效果
 $(selector).stop(stopAll,goToEnd);
 //其中的stopAll和goToEnd的参数是布尔类型,无参数情况下默认为false

//在同一个元素上可以链接多个动画效果
$("#div").css("color","rgb(0,0,255").hide("slow").slideDown("fast");

相关的英文单词:
hide[haɪd]:n. 躲藏;兽皮;躲藏处
vt. 隐藏;隐瞒;鞭打
vi. 隐藏

fade[fed]:adj. 平淡的;乏味的
vi. 褪色;凋谢;逐渐消失
vt. 使褪色

slide [slaɪd]:n. 滑动;幻灯片;滑梯;雪崩
vt. 滑动;使滑动;悄悄地迅速放置
vi. 滑动;滑落;不知不觉陷入

animate [‘ænɪmet]:adj. 有生命的
vt. 使有生气;使活泼;鼓舞;推动

stop [stɑp]:n. 停止;车站;障碍;逗留
vi. 停止;中止;逗留;被塞住
vt. 停止;堵塞;断绝

以上就是一些简单的jQuery效果事件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值