今天和大家分享一下用 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. 动态单链表的传统存储方式和10种常见操作-C语言实现

    顺序线性表的优点:方便存取(随机的),特点是物理位置和逻辑为主都是连续的(相邻).但是也有不足,比如:前面的插入和删除算法,需要移动大量元素,浪费时间,那么链式线性表 (简称链表) 就能解决这个问题. ...

  2. js断点调试心得

    虽然网上已经有多的数不清的调试教程了,但仍然没有发现哪篇文章写的通俗易懂,索性自己尝试写写自己的一些使用习惯或者说是心得,希望对那些还不是很懂得使用断点调试的孩子有一些帮助(大神请无视~). 1.断点 ...

  3. REST API出错响应的设计

    REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...

  4. [C] 关于表达式求值

    结论是:在一个表达式中,如果两个相邻操作符的执行顺序由它们的优先级决定,如果它们的优先级相同,它们的执行顺序由它们的结合性决定.若出现前述规则描述之外的情形,编译器可以自由决定求值的顺序(只要不违反逗 ...

  5. mysql基于init-connect+binlog完成审计功能

    目前社区版本的mysql的审计功能还是比较弱的,基于插件的审计目前存在于Mysql的企业版.Percona和MariaDB上,但是mysql社区版本有提供init-connect选项,基于此我们可以用 ...

  6. 基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度

    在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...

  7. 十条jQuery代码片段助力Web开发效率提升

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

  8. linux操作命令等积累

    1,启动服务:两种方式: /etc/init.d/networking start  /etc/init.d/mysql start #:service mysql start  service ne ...

  9. 关于ajax的同步和异步

    今天在开发中遇到个ajax访问Action 返回json 拼接Html,有时候能显示,有时候显示不出来. 考虑后一定是页面元素加载的问题. 所以把jq ajax设置为同步. 同步意为当访问后台代码时, ...

  10. 孙鑫MFC学习笔记：15多线程

    15 1.进程地址空间 2.线程 3.CreateThread创建一个线程 4.CloseHandle关闭线程句柄,要在不再使用线程句柄的时候关闭,递减线程引用计数 5.编辑框默认不支持多行,需要打开 ...