animate 实现滑动切换效果【实例代码】


Posted in Javascript onMay 05, 2016

今天和大家分享一下用 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;
      }
      .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 clearfix">
      <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>

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

animate 实现滑动切换效果【实例代码】

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

以上这篇animate 实现滑动切换效果【实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
javascript模拟命名空间
Apr 17 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
JS敏感词过滤代码
Dec 23 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 #Javascript
Sea.JS知识总结
May 05 #Javascript
在Node.js中使用Javascript Generators详解
May 05 #Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 #Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 #Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 #Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 #Javascript
You might like
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php验证手机号码
2015/11/11 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
微信小程序实现留言板
2018/10/31 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python使用pil生成缩略图的方法
2015/03/26 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Django保护敏感信息的方法示例
2019/05/09 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
学习Django知识点分享
2019/09/11 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
公务员党员评议表自我鉴定
2014/09/14 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
Python办公自动化PPT批量转换操作
2021/09/15 Python