分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

JQuery2

发布时间:2023-09-06 02:33责任编辑:林大明关键词:暂无标签

效果

1)显示、切换、隐藏:

<script>$(function(){var div = $("#d"); ??$("#b1").click(function(){ ?????div.hide(); ????}); /*隐藏*/ ??$("#b2").click(function(){ ?????div.show(); ??}); /*显示*/ ??$("#b3").click(function(){ ?????div.toggle(); ??}); /*切换,若当前为隐藏则改为显示,若当前为显示则改为隐藏*/ ??$("#b4").click(function(){ ?????div.show(1000); ??}); /*延迟1000ms显示*/ ??$("#b5").click(function(){ ?????div.hide(1000); ??}); /*延迟1000ms隐藏*/ ??$("#b6").click(function(){ ?????div.toggle(1000); ??}); /*延迟1000ms切换*/ ?}); ??</script>

2)向上滑动、向下滑动、滑动切换、滑动隐藏

<script>$(function(){var div = $("#d"); ??$("#b1").click(function(){ ?????div.slideUp(); ??}); ?/*向上滑动*/ ??$("#b2").click(function(){ ?????div.slideDown(); ??}); /*向下滑动*/ ??$("#b3").click(function(){ ?????div.slideToggle(); ??}); ?/*滑动切换*/ ??$("#b4").click(function(){ ?????div.slideUp(2000); ??}); /*延迟向上滑动*/ ??$("#b5").click(function(){ ?????div.slideDown(2000); ??}); ?/*延迟向下滑动*/ ??$("#b6").click(function(){ ?????div.slideToggle(2000); ??}); ?/*延迟滑动切换*/ ??}); ???</script>

3)淡入淡出:

JQuery2

原文地址:https://www.cnblogs.com/zhuqiwei-blog/p/10398591.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved