jQuery动画效果之滑入滑出slideDown,slideUp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>滑入滑出</title>    <meta charset="UTF-8">    <style type="text/css">        #slideshow,#slidehide,#slidetoggle,#slidetoggle,.content{            text-align: center;            padding: 5px;            background-color: #1ecc86;            color:black;            border: 1px solid red;        }        .content{            display: none;            padding: 50px;        }    </style></head><body><script src="jquery-3.4.1.js"></script><script>    $(document).ready(function () {        $(‘#slidehide‘).click(function () {

            $(‘.content‘).slideUp(1000)

        });        $(‘#slideshow‘).click(function () {            $(‘.content‘).slideDown(1000)

        });        $(‘#slidetoggle‘).click(function () {            $(‘.content‘).toggle(1000);        })    })</script><div id="slideshow">出现</div><div id="slidehide">隐藏</div><div id="slidetoggle">Toggle</div><div class="content">hello star♥</div>

</body></html>

原文地址：https://www.cnblogs.com/startl/p/12330660.html

时间： 2024-12-29 11:49:57

jQuery动画效果之滑入滑出slideDown,slideUp的相关文章

JS——侧栏导航点击滑入滑出效果

对于定位的侧栏导航点击滑入滑出这一效果,我想很多人都明白原理,并且很简单的就能运用JS+Jquery就能做出.而且是一个非常常见的简单效果.在此呢,小码哥只是为了自己以后能够翻看,还有就是给那些刚入门javascript的新人们一点启发. 作为入门javascript的人来说,明白一个效果是怎么实现的尤为重要.即原理是怎么回事尤为重要!小码哥昨天在路上偶遇一应届毕业生,刚从青岛来北京找工作.是学计算机的,C及C++起步,由此基础,我说你学什么语言都有优势.必定逻辑基础有了不是!? 废话不说了,直

利用jQuery实现，蒙板随鼠标滑入滑出

今天学习了jQuery的一些知识点,做了一个练习:实现蒙板随鼠标移动,从元素的四个方向滑入滑出.如图: jQuery知识点: 定位:获取相对于父元素的偏移量 position().left position().top 获取元素相对于当前窗口的偏移量 offset().left offset().top 步骤: 1.创建父元素.当前对象.蒙板代码如下: <div class="wrap">

WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动、惯性滑入滑出等效果

原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,也就赶鸭子上架了,经过努力

div层的滑入滑出实例

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src

类似通讯录分组的Android PinnedSectionListView，且分组标签悬停滑入滑出

<类似通讯录分组的Android PinnedSectionListView,且分组标签悬停滑入滑出> 常用的联系人.通讯录,会按照联系人的姓氏从A,B,C,,,X,Y,Z,这样归类排列下去,方便用户快速查找和定位.PinnedSectionListView是一个第三方的开源框架,在github上的链接地址是:https://github.com/beworker/pinned-section-listview .Android PinnedSectionListView不仅是一个实现上

ios 页面滑入滑出

从左边滑进 CGRect r1,r2; r1 = app.testview.view.frame; r2 = self.view.frame; [app.testview.view setFrame:CGRectMake(320, r1.origin.y,r1.size.width,r1.size.height)]; [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:0.4]; [app.window a

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数回调函数:动画执行完毕之后要执行的函数滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

风火轮 –动画效果：浮入与劈裂

今天花了一个半小时,实现两个动画效果:浮入与劈裂. 浮入效果头文件 enum CbwFloatDirection { // 浮入方向 cfdUp = 0, // 上浮 cfdDown = 1 // 下浮 }; /** * @class TCbwAnimationEffect_ FloatIn * @brief 动画基类 * * 处理浮入动画效果 * @author 陈斌文 * @version 1.0 * @date 2015-03-05 * @QQ: 282397369 */ class T

风火轮 – 动画效果：浮入与劈裂

今天花了一个半小时,实现两个动画效果:浮入与劈裂. 1. 浮入效果头文件 enum CbwFloatDirection { // 浮入方向 cfdUp= 0, // 上浮 cfdDown= 1 // 下浮 }; /** *@class TCbwAnimationEffect_ FloatIn *@brief 动画基类 * * 处理浮入动画效果 *@author 陈斌文 *@version 1.0 *@date 2015-03-05 *@QQ: 282397369 */ class TCbwA