今天和大家分享一下用 animate 实现滑动切换效果的小例子 ------- 来自<一只有梦想的前端小白>

大家都知道jQuery 提供的有一下几种方法能够实现滑动效果：

  1. slideDown()
  2. slideUp()
  3. slideToggle()

但是以上的滑动不太方便控制其滑动的方向，所以我们还是自己动手写一个吧。。。

其代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.         <title>Examples</title>
  7.         <meta name="description" content="">
  8.         <meta name="keywords" content="">
  9.         <style type="text/css">
  10.             body{
  11.                 width: 100%;
  12.                 height: auto;
  13.             }
  14.             .content{
  15.                 width: 150px;
  16.                 height: 50px;
  17.                 position: absolute;
  18.                 top: 20px;
  19.                 left: 20px;
  20.                 overflow: hidden;
  21.                 background-color: red;
  22.             }
  23.             .slide-box{
  24.                 width: 300px;
  25.                 position: relative;
  26.                 overflow: hidden;
  27.             }
  28.             .slide1{
  29.                 width: 150px;
  30.                 height: 50px;
  31.                 float: left;
  32.                 display: inline-block;
  33.                 line-height: 50px;
  34.                 text-align: center;
  35.                 background-color: #BDD8CF;
  36.             }
  37.             .slide2{
  38.                 width: 150px;
  39.                 height: 50px;
  40.                 float: right;
  41.                 display: inline-block;
  42.                 line-height: 50px;
  43.                 text-align: center;
  44.                 background-color: #C1C4C4;
  45.             }
  46.         </style>
  47.     </head>
  48.     <body>
  49.         <div class="content">
  50.             <div class="slide-box">
  51.                 <span class="slide1">左边的元素</span>
  52.                 <span class="slide2">右边的元素</span>
  53.             </div>
  54.         </div>
  55.  
  56.     <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
  57.     <script type="text/javascript">
  58.         $(function(){
  59.             $(".content").hover(function(){
  60.                 $(".slide-box").stop(true).animate({right:"150px"},'slow');
  61.             },function(){
  62.                 $(".slide-box").stop(true).animate({right:"0"},'slow');
  63.             });
  64.         })
  65.     </script>
  66.     </body>
  67. </html>

以上代码即可以实现一个完整的滑动效果。但是有一点需要注意，

如上图所示，需要加上 stop() 事件 ，防止鼠标快速移动时产生的多个事件，形成一个栈队，造成鼠标移除后依旧滑动甚至闪动的效果。

希望以上的介绍对您能有所帮助，同时这也是我自己只是内化的过程，感谢博客园平台！----来自<一只有梦想的前端小白>

animate 实现滑动切换效果的更多相关文章

  1. 一分钟搞定触手app主页酷炫滑动切换效果

    代码地址如下:http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想这 ...

  2. 【Android UI】案例03滑动切换效果的实现(ViewPager)

    本例使用ViewPager实现滑动切换的效果.本例涉及的ViewPager.为android.support.v4.view.ViewPager.所以须要在android项目中导入android-su ...

  3. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  4. Flexslider图片轮播、文字图片相结合滑动切换效果

    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...

  5. 《JavaScript 实战》：JavaScript 图片滑动切换效果

    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...

  6. uni-app实现滑动切换效果

    在对于uni-app框架了解之后,今天就实现一个滚动切换tab效果,这个很常见的一个效果,最后封装成一个组件,便于以后使用,写这个需要引入uni官方提供的uni.css样式,用到了写好的样式,就不需要 ...

  7. 一款实现滑动切换效果的插件---swiper

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...

  8. Flexslider插件实现图片轮播、文字图片相结合滑动切换效果

    插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...

  9. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

随机推荐

  1. Request 接收参数乱码原理解析三：实例分析

    通过前面两篇<Request 接收参数乱码原理解析一:服务器端解码原理>和<Request 接收参数乱码原理解析二:浏览器端编码原理>,了解了服务器和浏览器编码解码的原理,接下 ...

  2. 寻找表达式（dfs）

    题目来源:微策略2013年校园招聘笔试题 题目描述: 现在有一个序列123......N,其中N介于3和15之间,要求在序列之间加入+.-或者空格,使得该序列组成的数学表达式的运算结果为0. 输入: ...

  3. Docker - Docker国内镜像的配置及使用

    Docker国内镜像 DaoCloud - Docker加速器 阿里云 - 开发者平台 微镜像 - 希云cSphere 镜像广场 - 时速云 灵雀云 网易蜂巢 阿里云的Docker加速器 阿里云 - ...

  4. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  5. Codrops 优秀教程：实现效果精美的多层推拉菜单

    Codrops 给我们分享了一个多层菜单的实现教程.他们试图探索创建一个嵌套的多级菜单,是非常有用的东西,可以有很多的内容,如网上商店的导航菜单. 这个 Push Menu 效果理论上可以包含无限嵌套 ...

  6. JavaScript 回忆录

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 1. 基本类型和应用类型 1.1 复制变量值的不同 值类型的变量在复制变量值后互不影响,因为值类型本身保存的就是 ...

  7. javascript学习5

    JavaScript Array(数组)对象 数组对象的作用是:使用单独的变量名来存储一系列的值. 实例 创建数组 创建数组,为其赋值,然后输出这些值. For...In 声明 使用 for...in ...

  8. 各种排序学习归纳总结(Java)

    排序总结 根据<数据结构与算法分析——Java语言描述><INTRODUCTION TO JAVA PROGRAMMING>.维基及各技术博客知识点来总结的.  如果刚入门学习 ...

  9. java中String的相等比较

    首先贴出测试用例: package test; import org.junit.Test; /** * Created by Administrator on 2015/9/16. * */ pub ...

  10. Windows下elasticsearch插入数据报错！

    按照官方文档操作,但是windows下有些不同,它不认识单引号',因此如果这样操作,就会报错: C:\Users\neusoft>curl localhost:9200/b1/b2/1 -d { ...