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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
JS实现音乐导航特效
Jan 06 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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
检测png图片是否完整的php代码
2010/09/06 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python fileinput模块使用实例
2015/06/03 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
如何执行一个shell程序
2012/11/23 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
运动会稿件300字
2014/02/14 职场文书
校长四风对照检查材料
2014/09/27 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers