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

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

  1. slideDown()
  2. slideUp()
  3. 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 实现滑动切换效果的更多相关文章

  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. 转载--How to Install VMware Tools on CentOS 6.3

    源地址:http://www.ehowstuff.com/how-to-install-vmware-tools-on-centos-6-3/ VMware Tools is a group of u ...

  2. Bourbon – 简单轻量的 Sass 混入（Mixins）库

    Bourbon 是一个简单易用的 Sass 混入(Mixin)库,无需配置.该混入包含用于支持所有现代浏览器的 CSS3 属性前缀.前缀需要确保在旧的浏览器支持优雅降级.Bourbon 使用 SCSS ...

  3. LoRaWAN协议(五)--OTAA入网方式详述

    前言 OTAA(Over-The-Air Activation),是LoRaWAN的一种空中入网方式.当node在上电的时候处于非入网状态时,需要先入网才能和服务器进行通信.其操作就是node发送jo ...

  4. java设计模式（六）--观察者模式

    转载:设计模式(中文-文字版) 目录: 简单目标任务实现 观察者模式介绍 观察者模式代码实现 观察者模式是JDK中使用最多的模式之一,非常有用.我们也会一并介绍一对多关系,以及松耦合(对,没错,我们说 ...

  5. QT学习笔记3

    对话框 新建了一个对话框,在新建项目选择类型时是Dialog即可. 添加的代码如下,注意QCheckBox 并没有添加头文件定义,只是加了类的前向声明.因为我们仅仅使用的是指针,并不涉及到这些类的函数 ...

  6. Elasticsearch Span Query跨度查询

    ES基于Lucene开发,因此也继承了Lucene的一些多样化的查询,比如本篇说的Span Query跨度查询,就是基于Lucene中的SpanTermQuery以及其他的Query封装出的DSL,接 ...

  7. 基于HTML5的WebGL呈现A星算法的3D可视化

    http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现 ...

  8. ClojureScript魔法堂：搭建开发环境

    一.前言 当看到Lisp等函数式编程语言的语法是 (say (concat "hello" "world")) 这样的时候,我就有种深入学习的冲动,因为它的语法 ...

  9. 局部页面传值Model

    1:新建个局部页面,将这里页面的Model数据传递过去,在局部页面进行和一般页面一样的操作就行. 这里和HTML.Action不一样,对于HTML.action来说,它是新建了一个action来进行传 ...

  10. 代码实现SQL Server动态行转列，不用存储过程

    分两步查询,第一步查询出动态列,第二步使用PIVOT函数. 代码: List<DataTable> dataTableList = new List<DataTable>(); ...