今天和大家分享一下用 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. Visual Studio 选择相同变量高亮

    前段时间一直在使用matlab,今天需要使用vs2008,而用惯了matlab,习惯了其中一项选中变量高亮的设置,突然回来使用VS,感到各种不适应,顿时想到了一个词:矫情 呵呵,于是在网上找各种插件, ...

  2. [转]Linux df 命令不更新磁盘数据空间使用情况的解决办法

    当你已经找出并remove掉Linux系统中的大容量文件时,然后使用df -h查看使用情况依旧不变时.可尝试如下方法解决 1.找出那个进程占用了哪些已删除的文件 # 查看哪些被文件还在被哪个进程占用 ...

  3. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  4. Azure PowerShell (1) PowerShell整理

    <Windows Azure Platform 系列文章目录> 把之前Azure ASM的PowerShell都整理好了. https://github.com/leizhang1984/ ...

  5. Microsoft Azure News(1) 新的数据中心Japan East, Japan West and Brazil South

    <Windows Azure Platform 系列文章目录> 微软官方博客今天表示,微软宣布将在日本东部(埼玉县)和日本西部(大阪)提供Windows Azure服务.就在最近,微软为W ...

  6. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  7. 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要一

    本人有幸在Learning Hard举行的整点抢书活动<Learninghard C#学习笔记>回馈网友,免费送书5本中免费获得了一本<LEARNING HARD C#学习笔记> ...

  8. Mailbox unavailable. The server response was: 5.1.1 User unknown

    昨晚至今早,在新的项目中,实现一个小功能,就是当有访问者浏览网页在留言簿留言时,系统把留言内容发送至某一个邮箱或是抄送指定的邮箱中. 使用以前能正常发送邮件的代码,但在新项目中,测试时,就是出现标题的 ...

  9. WPF学习之绘图和动画

    如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...

  10. javascript学习笔记1-document.write

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...