<!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. 【转帖】超能课堂(188) WiFi 6凭什么可以如此“六”？

    https://www.expreview.com/69155.html 不明觉厉 这些东西 自己理解的还是少呢 电脑硬件可能一年甚至不到一年就会开始更新换代,但是路由器就不一样,它们的更新换代往往是 ...

  2. 【面试向】hihoCoder 1994 树与落叶

    题目链接 Implementation int n, q; scan(n,q); vi p(n + 1); vi nson(n + 1); up (i, 1, n) { scan(p[i]); nso ...

  3. mysql开启和关闭安全模式

    今天在进行数据库UPDATE的时候出了一个问题,我把非主键的字段当作UPDATE的条件(筛选条件)时,提示了如下的语句 Error Code: 1175. You are using safe upd ...

  4. Java服务，内存OOM问题如何快速定位？ (转)

    转自:公众号  架构师之路 问题:有一个Java服务出现了OOM(Out Of Memory)问题,定位了好久不得其法,请问有什么好的思路么? OOM的问题,印象中之前写过,这里再总结一些相对通用的方 ...

  5. Java工具类-基于SnowFlake的短地址生成器

    Twitter的SnowFlake算法,使用SnowFlake算法生成一个整数,然后转化为62进制变成一个短地址URL /** * Twitter的SnowFlake算法,使用SnowFlake算法生 ...

  6. leetcode hard

    # Title Solution Acceptance Difficulty Frequency     4 Median of Two Sorted Arrays       27.2% Hard ...

  7. CentOS7实现Nginx+Tomcat 负载均衡

    0. 说明 将nginx作为负载均衡器,反向代理,tomcat作为节点服务器 192.168.100.201:nginx服务器 192.168.100.202:Tomcat 1服务器 192.168. ...

  8. JS基础_数据类型-String类型

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 深入理解hive基础学习

    Hive 是什么?  1.Hive 是基于 Hadoop处理结构化数据的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类 SQL 查询功能. 2.Hive 利用 HDFS 存储数据 ...

  10. nginx redirect ignore port 两层nginx跳转忽略了端口

    问题: 两层nginx做代理,第一层:nginx:将9087->代理到80端口,第二层:将80端口->流量打到我们的代码上,结果在代码中拿到的链接不带9087端口,则代码中发生跳转的时候, ...