今天和大家分享一下用 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. MFC 字符串类CString 源代码

    原文:http://blog.csdn.net/benny5609/article/details/1926088 CString使用的是引用技术,可以共享数据(这个大家都知道),另外空的CStirn ...

  2. Android基于mAppWidget实现手绘地图（十五）–如何控制放大缩小

    一般来说,可以使用以下几种方式来控制地图的放大/缩小 : 1. 使用控件底部的缩放按钮 2.双击控件 3.pinch手势 4.物理按键 :I键标识缩小  :O键表示放大.(只有设备具有物理按键才行) ...

  3. Android基于mAppWidget实现手绘地图（七）–根据坐标添加地图对象

    为了将地图对象放置到某个特殊的地理位置上,你需要: 1. 创建地图对象 2.添加地图对象到图层(任何位置) 3. 移动该地图对象,使用 MapObject.moveTo(Location locati ...

  4. LeetCode - 120. Triangle

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...

  5. Eclipse10个最有用的快捷键[From: Internet]

    1. ctrl+shift+r:打开资源这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xml ...

  6. Windows Azure HandBook (3) 浅谈Azure安全性

    <Windows Azure Platform 系列文章目录> 2015年3月5日-6日,参加了上海的Azure University活动.作为桌长与微软合作伙伴交流了Azure相关的技术 ...

  7. 基于 CSS3 Media Queries 的 HTML5 应用

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  8. Moon.Orm 5.0(MQL版)及之前版本的开源计划

    开源综述:步步开源 Moon.Orm 5.0 (MQL版) 版本维护及下载 (跟踪发布) Moon.Orm 5.0系列文章 Moon.Orm 5.0性能问题,将发言权交给你! 一.5.0目前的情况,步 ...

  9. HBase单个RegionServer的region数目上限

    前言 RegionServer维护Master分配给它的region,处理对这些region的IO请求,负责切分在运行过程中变得过大的region, 由于集群性能( 分配的内存和磁盘是有限的 )有限的 ...

  10. SQL Server - 把星期一(周一)当作每个星期的开始在一年中求取周数

    先感叹一句!好长时间没有更新博客了!偶尔看到一句话,觉得被电击了 - 庸人败于懒,能人败于傲! 因此,不能再懒惰了! 今天想写一个有关计算 Week Number 的函数,刚开始觉得应该很简单,凭着感 ...