jQuery滑动效果实现方法分析

2024-09-29 17:36:25

本文实例讲述了jQuery滑动效果实现方法。分享给大家供大家参考，具体如下：

jQuery 滑动方法：

1.slideDown()方法：用于向下滑动元素

语法：

$(selector).slideDown(speed,callback);

2.slideUp()方法：用于向上滑动元素

语法：

$(selector).slideUp(speed,callback);

3.slideToggle()方法：可以在slideDown()与slideUp()方法之间进行切换。

语法：

$(selector).slideToggle(speed,callback);

eg:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div class="panel">
<p>Hello world</p>
<p>Hello everyone,I am so cool</p>
</div>
<p class="flip">click</p>
</body>
</html>

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

JQuery动画animate的stop方法使用详解

animate语法: 复制代码代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css
jQuery Animation实现CSS3动画示例介绍

jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red").详细用法请参考jQuery 效果 - animate()方法和官方教程. 像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的.如translate(), ro
jquery animate 动画效果使用说明

animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就
jQuery动画animate方法使用介绍

复制代码代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin
jQuery实现基本动画效果的方法详解

本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},speed,callback); params:必须定义形成动画的CSS属性 speed:可选规定效果的时常:slow,fast或毫秒 callback:可选动画完成后所执行的函数名称. jQuery animate()--操作多个属性默认情况下,所有HTML元素的位置都是静态的,并且无法移动,
jQuery实现切换页面过渡动画效果

直接为大家介绍制作过程,希望大家可以喜欢. HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进度条. <main> <div class="cd-index cd-main-content"> <div> <h1>Page Transition</
jQuery实现的淡入淡出图片轮播效果示例

本文实例讲述了jQuery实现的淡入淡出图片轮播效果.分享给大家供大家参考,具体如下: 1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致) css部分: <style> * { padding: 0; margin:0; } ul { list-style: none; } .out { width: 640px; height: 270px; margin:50px auto; position: relative; } .out img{ width: 640px; heig
jQuery实现动画、消失、显现、渐出、渐入效果示例

本文实例讲述了jQuery实现动画.消失.显现.渐出.渐入效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title></titl
jQuery实现基本淡入淡出效果的方法详解

本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元素 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script
jQuery滑动效果实现方法分析

本文实例讲述了jQuery滑动效果实现方法.分享给大家供大家参考,具体如下: jQuery 滑动方法: 1.slideDown()方法:用于向下滑动元素语法: $(selector).slideDown(speed,callback); 2.slideUp()方法:用于向上滑动元素语法: $(selector).slideUp(speed,callback); 3.slideToggle()方法:可以在slideDown()与slideUp()方法之间进行切换. 语法: $(selector
jQuery层动画定位滑动效果的方法

本文实例讲述了jQuery层动画定位滑动效果的方法.分享给大家供大家参考.具体实现方法如下: <!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">
js实现分享到随页面滚动而滑动效果的方法

本文实例讲述了js实现分享到随页面滚动而滑动效果的方法.分享给大家供大家参考.具体如下: 页面向上向下滚动,分享到的模块随着滑动. 要点: 复制代码代码如下: var scrtop =document.documentElement.scrollTop||document.body.scrollTop; var height = document.documentElement.clientHeight||document.body.clientHeight; var top = scrtop
jQuery打字效果实现方法(附demo源码下载)

本文实例讲述了jQuery打字效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 1.前台页面代码: <!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
Android编程实现小说阅读器滑动效果的方法

本文实例讲述了Android编程实现小说阅读器滑动效果的方法.分享给大家供大家参考,具体如下: 看过小说都知道小说阅读器翻页有好多种效果,比如仿真翻页,滑动翻页,等等.由于某种原因,突然想写一个简单点的滑动翻页效果.在这里写出来也没有什么意图,希望大家可以根据这个效果举一反三,写出其他的效果.图就不上了. 下面是代码:大家理解onTouch事件即可 package com.example.testscroll.view; import android.content.Context; impor
Android继承ViewGroup实现Scroll滑动效果的方法示例

本文实例讲述了Android继承ViewGroup实现Scroll滑动效果的方法.分享给大家供大家参考,具体如下: extends ViewGroup需要重写onMeasure和onLayout方法 onMeasure方法是去测量ViewGroup需要的大小以及包含的子View需要的大小. 执行完上面的方法后,再执行onLayout方法去设置子View的摆放位置. 实现Scroll滑动效果需要去检测滑动速率,即要知道每个单位时间滑动了多少像素值,根据这个像素值去判断Scroll滑动到下一页还是上
Vue实现移动端左右滑动效果的方法

1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的. 3. 使用: 3.1 npm install vue-touch@next --save 3.2 在main.js 中引入: import VueTouch from 'vue-touch
jQuery设置下拉框显示与隐藏效果的方法分析

本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() 方法则可以切换 hide() 和 show() 方法,也就是显示被隐藏的元素,并隐藏已显示的元素. $("select").hide(); // 隐藏下拉框 $("select").show(); // 显示下拉框 $("select").togg
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析

本文实例讲述了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法.分享给大家供大家参考,具体如下: 实现效果如上图,当鼠标放置到名字上时,则显示出内容详情. 实现具体过程如下: 1.需要加这句js  <script> $(function () { $('[data-toggle="popover"]').popover() }); </script> 2.html代码如下: <td
JS实现淡入淡出图片效果的方法分析

本文实例讲述了JS实现淡入淡出图片效果的方法.分享给大家供大家参考,具体如下: 效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明分析:用变量来储存透明度,因为元素.style.alpha不能直接增加或减少核心代码: window.onload=function(){ var oDiv=document.getElementById("div1"); var timer=null; var alpha=30; oDiv.onmouseover=function()

jQuery滑动效果实现方法分析

相关推荐

随机推荐