slideLeft DIV向左右滑动

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。

注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。

$(selector).animate(styles,speed,easing,callback)
$(selector).animate(styles,options)  

语法及参数可参考
http://www.w3school.com.cn/jquery/effect_animate.asp实现的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">//自写JQuery方法 //向右滑动就是按毫秒值隐藏style,向左滑动就是按毫秒值显示style
    jQuery.fn.slideRight = function( speed, callback ) {
        this.animate({
            width : "hide",
            paddingLeft : "hide",
            paddingRight : "hide",
            marginLeft : "hide",
            marginRight : "hide"
        }, speed, callback );
    };
    jQuery.fn.slideLeft = function( speed, callback ) {
        this.animate({
            width : "show",
            paddingLeft : "show",
            paddingRight : "show",
            marginLeft : "show",
            marginRight : "show"
        }, speed, callback );
    };
</script>
<script type="text/javascript">
function  huadong() {

        $(".class").slideLeft(40000);
    }
huadong()
</script>

</head>
<body onload="huadong()">

    <div class="class" style="background-color:red; display:none; height:200px; width:100%"></div>
</body>
</html
时间: 2024-10-10 14:20:54

slideLeft DIV向左右滑动的相关文章

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

jQuery效果-滑动

index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs3.js&qu

美化input type=range标签滑动样式(带渐变效果)

input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class="inputRatio"> 滑动条:<input type="range" name="ratio" :value="parseInt(ratio)" @input="ratio=$event.target.v

前端实现滑动解锁

上代码: <template> <div> <div id="box"> <div class="bgColor"></div> <div class="txt" >滑动解锁</div> <!--给i标签添加上相应字体图标的类名即可--> <div class="slider"> <i v-show="!

爬虫:通过滑动或者点触验证码的方法及实现(点触+滑动)

一.极验验证码(geetest)的三种验证模式 以极验官网登录(https://auth.geetest.com/login/)为例: 在点击 “点击按钮进行验证”按钮后,会出现三种情况 1.点击直接通过 在一段时间的前几次登录时,点击按钮,会直接通过验证: 2.点击出现滑动验证码 登录几次后,再次登录时,就会出现滑动验证码: 3.点击出现点触验证码: 登录过多时,就会出现点触验证码,这也是极验最难的一种验证码: 二.分析 利用Python的selenium模块进行自动登录. 1.判断是否通过验

自己动手丰衣足食,为Zepto添加Slide动画效果

一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页面过渡需要用到动画,简单的show/hide过渡太生硬,对用户不友好,并且移动端大多都是采用slide效果,此文主要是为zepto拓展slide动画. 二.发现 从zepto的在线文档上可以发现一个发布在github上的动画模块,但是缺少slide效果,度娘上找了找,相关的极少,只发现了一个slid

为Zepto添加Slide动画效果

一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页面过渡需要用到动画,简单的show/hide过渡太生硬,对用户不友好,并且移动端大多都是采用slide效果,此文主要是为zepto拓展slide动画. 二.发现 从zepto的在线文档上可以发现一个发布在github上的动画模块,但是缺少slide效果,度娘上找了找,相关的极少,只发现了一个slid

JS-特效 ~ 01. 事件对象、offset偏移/检测、无缝滚动、自动循环轮播图

Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取元素尺寸 2. 检测盒子的宽高     事件源.offsetLeft. /. ele.offsetWidth /返回的数值没有单位,是number类型 /包括内边距.边框,不包括外边距 3. 获取定位的元素的left和top值  offsetLeft / offsetTop 如果被获取的元素没有定位

[JS] JavaScript由浅入深(2) jQuery

jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. 官网API: http://api.jquery.com 下载: NuGet:Install-Package jQuery 1.主要功能 html选取,操作,css操作,事件,特效,遍历,ajax 2.版本 1.x:IE6+(本人测试,部分方法还是不