animate 实现滑动切换效果
今天和大家分享一下用 animate 实现滑动切换效果的小例子 ------- 来自<一只有梦想的前端小白>
大家都知道jQuery 提供的有一下几种方法能够实现滑动效果：
- slideDown()
- slideUp()
- slideToggle()
但是以上的滑动不太方便控制其滑动的方向，所以我们还是自己动手写一个吧。。。
其代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
body{
width: 100%;
height: auto;
}
.content{
width: 150px;
height: 50px;
position: absolute;
top: 20px;
left: 20px;
overflow: hidden;
background-color: red;
}
.slide-box{
width: 300px;
position: relative;
overflow: hidden;
}
.slide1{
width: 150px;
height: 50px;
float: left;
display: inline-block;
line-height: 50px;
text-align: center;
background-color: #BDD8CF;
}
.slide2{
width: 150px;
height: 50px;
float: right;
display: inline-block;
line-height: 50px;
text-align: center;
background-color: #C1C4C4;
}
</style>
</head>
<body>
<div class="content">
<div class="slide-box">
<span class="slide1">左边的元素</span>
<span class="slide2">右边的元素</span>
</div>
</div> <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".content").hover(function(){
$(".slide-box").stop(true).animate({right:"150px"},'slow');
},function(){
$(".slide-box").stop(true).animate({right:"0"},'slow');
});
})
</script>
</body>
</html>
以上代码即可以实现一个完整的滑动效果。但是有一点需要注意，
如上图所示，需要加上 stop() 事件 ，防止鼠标快速移动时产生的多个事件，形成一个栈队，造成鼠标移除后依旧滑动甚至闪动的效果。
希望以上的介绍对您能有所帮助，同时这也是我自己只是内化的过程，感谢博客园平台！----来自<一只有梦想的前端小白>
animate 实现滑动切换效果的更多相关文章
- 一分钟搞定触手app主页酷炫滑动切换效果
代码地址如下:http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想这 ...
- 【Android UI】案例03滑动切换效果的实现(ViewPager)
本例使用ViewPager实现滑动切换的效果.本例涉及的ViewPager.为android.support.v4.view.ViewPager.所以须要在android项目中导入android-su ...
- 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
- 《JavaScript 实战》：JavaScript 图片滑动切换效果
看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...
- uni-app实现滑动切换效果
在对于uni-app框架了解之后,今天就实现一个滚动切换tab效果,这个很常见的一个效果,最后封装成一个组件,便于以后使用,写这个需要引入uni官方提供的uni.css样式,用到了写好的样式,就不需要 ...
- 一款实现滑动切换效果的插件---swiper
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
- Flexslider插件实现图片轮播、文字图片相结合滑动切换效果
插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
随机推荐
- 构建自己的PHP框架--抽象框架的内容
上一篇博客中,我们搭建了一个最简单的框架,从单一入口的public/index.php进入,解析出相应的Controller和Action,去执行,渲染出相应的页面或者输出相应的数据. 但是我们可以看 ...
- GitHub入门教程 Hello World for GitHub
Intro 1.简介 What is GitHub? 2.什么是github? Create a Reposi ...
- 如何启动免安装版Tomcat并将Tomcat添加到服务中
1.安装jdk,并配置环境变量 (1)在Path中添加 F:\Program Files\Java\jdk1.8.0_25\bin (2)添加一个JAVA_HOME变量,变量值为F:\Program ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- File Type Icons – 免费扁平设计风格文件类型图标集
这套扁平风格图标集包含一组62个不同的文件类型图标,有 AI,ICO和 PNG 三种格式.他们采用长阴影模式的扁平化设计,看起来非常整齐和现代化.这些图标是完全免费的,可以用于商业项目. 您可能感兴趣 ...
- cnn笔记2
- Elasticsearch Javascript API增删改查
查询 根据索引.类型.id进行查询: client.get({ index:'myindex', type:'mytype', id:1 },function(error, response){// ...
- C++二维码相关库编译
一.瞎想 坐在地铁上闲来无聊,突然想到了二维码,顺手就百度了下相关的资料,目前C++二维码相关的库不多,也就zbar(开源中国上下了半天也没下载下来).zxing,不过这两个库据说都是解析二维码的,不 ...
- Node.js系列基础学习----安装，实现Hello World, REPL
Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
- 关于JQuery（最后一点动画效果*）
1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...