<!DOCTYPE HTML>
<html>
<head>
    <meta charset=utf-8 />
    <title>UFO来了</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
    .box{
        width:200px;
        height: 1000px;
        position:absolute;
        background-color: rebeccapurple;
    }
    </style>
</head>
<body>
    <button class="btnn">开始吧</button>
    <div class="box"></div>
    <script>
    $('.btnn').on('click',function (){
         $('.box').animate({'left':'1200px'},500,function () {  <!--这里不明白为啥不能用‘right’：0px 欢迎给大佬解答-->
            $(this).animate({'left':'0px'},500,function () {
                $('.btnn').click()
            })
        })
    })

    </script>
</body>
</html>

Jquery实现div左右重复来回走动的更多相关文章

  1. jquery给div,Span, a ，button, radio 赋值取值

    jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html(&quo ...

  2. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  3. jquery实现DIV层拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JavaScript和JQuery获取DIV的值

    1.设计源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. jquery用div模拟一个下拉列表框

    原文 jquery用div模拟一个下拉列表框 今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我 ...

  6. 如何用jQuery实现div随鼠标移动而移动（详解）？----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  7. 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】

    1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...

  8. jquery的div局部刷新

    jquery的div局部刷新 //div的局部刷新 $(".dl").load(location.href+" .dl"); 全页面的刷新方法 window.l ...

  9. jQuery事件-div的显示隐藏及鼠标的移入移出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. linux分区知识

    1.硬盘使用前,一般要分区,格式化(创建文件系统)--存放数据(极端情况下,可以不分区) 2.分区: 主分区. 扩展分区.逻辑分区 主分区+拓展分区的数量<=4,其中一个主分区可以用一个拓展分区 ...

  2. pycharm2019最新激活注册码（亲测有效）

    激活码一: 812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2l ...

  3. 2019牛客暑期多校训练营(第三场)- F Planting Trees

    题目链接:https://ac.nowcoder.com/acm/contest/883/F 题意:给定n×n的矩阵,求最大子矩阵使得子矩阵中最大值和最小值的差值<=M. 思路:先看数据大小,注 ...

  4. PTA(Advanced Level)1036.Boys vs Girls

    This time you are asked to tell the difference between the lowest grade of all the male students and ...

  5. Kinect开发-开发环境搭建

    0.安装Visual Studio.版本无所谓,但Kinect SDK for Windows只支持C/C#.接下来的开发语言将使用C#,用户界面框架使用WPF. 安装Kinect SDK for W ...

  6. 手写一个python迭代器

    分析 我们都知道一个可迭代对象可以通过iter()可以返回一个迭代器. 如果想要一个对象称为可迭代对象,即可以使用for,那么必须实现__iter __()方法. 在一个类的实例对象想要变成迭代器,就 ...

  7. Django 中事务的使用

    目录 Django 中事务的使用 Django默认的事务行为 在HTTP请求上加事务 在View中实现事务控制 使用装饰器 使用context manager autocommit() commit_ ...

  8. python并发编程-进程理论-进程方法-守护进程-互斥锁-01

    操作系统发展史(主要的几个阶段) 初始系统 1946年第一台计算机诞生,采用手工操作的方式(用穿孔卡片操作) 同一个房间同一时刻只能运行一个程序,效率极低(操作一两个小时,CPU一两秒可能就运算完了) ...

  9. server001

  10. 微信小程序使用页面栈改变上一页面的数据

    微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...