<!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. 云风协程库coroutine源码分析

    前言 前段时间研读云风的coroutine库,为了加深印象,做个简单的笔记.不愧是大神,云风只用200行的C代码就实现了一个最简单的协程,代码风格精简,非常适合用来理解协程和用来提升编码能力. 协程简 ...

  2. 小白基础Python重要的字符串详解String的内置方法

    String的内置方法: st='hello world  {name} is {age}'  {}  特殊内容需要识别format print(st.count('1')) 统计元素个数 print ...

  3. Codeforces 1221C. Perfect Team

    传送门 考虑如何保证限制,首先团队数最大就是 $min(c,m)$ 但是还不够,每个团队还要 $3$ 个人,所以还要和 $(c+m+x)/3$ 再取 $min$ 这样就满足所有限制了 #include ...

  4. java -cp 执行jar包里的某个类

    当我们需要测试某个功能时,需要在linux环境下执行某个类的main方法来测试 可以使用java -cp xxx.jar com.MyClass来执行某个类 java -cp test.jar:lib ...

  5. 给网页中的button加动画效果

    网页中的很多事件交互都是通过点击页面中的按钮来实现的,给按钮加一点动画效果也会让网页看起来生动一些,以下就是一个简单的例子: 此按钮的动画主要是通过css的transform动画,伪元素,伪类来实现: ...

  6. linux环境下tomcat启动成功，部分请求页面出现404

    这种情况很多,本文记录我遇到比较奇葩的情况. 第一种情况: 第一次tomact启动成功,访问404,乱捣鼓不知怎么好了:第二次tomcat启动成功,可以访问部分链接,有些却报404,但是代码和数据都还 ...

  7. oa_mvc_easyui_后台布局(3)

    1.新建HomeController控制器,并创建视图,后台的主页 2.easyUI的引用: <link href="~/Content/default/easyui.css" ...

  8. PanDownload/AD16/MDK5/CAD2019及2007/Dev-C++/Office2016专业版软件安装包

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 作者:struct_mooc 博客地址:https://www.cnblogs.com/stru ...

  9. 多线程编程-- part 6 共享锁和ReentrantReadWriteLock

    介绍: ReadWriteLock,顾名思义,是读写锁.它维护了一对相关的锁 — — “读取锁”和“写入锁”,一个用于读取操作,另一个用于写入操作.(1)“读取锁”用于只读操作,它是“共享锁”,能同时 ...

  10. 阿里云(ecs服务器)使用3-安装mysql数据库以及远程部署

    1.安装 1.下载rpm包,下载地址 http://dev.mysql.com/downloads/mysql/,选择Linux-Generic版本 .新建 /usr/local/mysql 文件夹, ...