<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>scrollTop与offset.top、animate</title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        body {

            margin: 0 auto;

            max-width: 640px;

            background-color: #fbfbfb;

            padding: 10px;

        }

        .bd {

            height: 1650px;

            overflow: hidden;

        }

        .btn_animate {

            position: absolute;

            width: 120px;

            height: 30px;

            line-height: 30px;

            background-color: rgb(129, 26, 26);

            color: #fff;

            text-align: center;

        }

        .btn_ho {

            position: absolute;

            top: 40px;

            left: 0;

            width: 120px;

            height: 30px;

            line-height: 30px;

            background-color: rebeccapurple;

            border-radius: 5px;

            color: #fff;

            text-align: center;

            margin: 10px 0;

        }

        .btn_go {

            position: absolute;

            left: 0;

            top: 90px;

            height: 30px;

            line-height: 30px;

            width: 150px;

            background-color: plum;

            border-radius: 5px;

            text-align: center;

        }

        .hide {

            position: absolute;

            top: 160px;

            left: 0;

            display: none;

            width: 100px;

            height: 30px;

            background-color: orange;

        }

        .btn_top{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: navy; border-radius: 5px; color: #fff;}

        .btn_top_r{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: rgb(11, 104, 84); border-radius: 5px; color: #fff;}

    </style>

</head>

<body>

    <div class="bd">

        <div style="height: 400px; background-color: rgb(33, 107, 172); position: relative;" id="demo">

            <div class="btn_animate" id="btnAnimate">点击向左移动</div>

            <div class="btn_ho" id="btnHo">点击切换</div>

            <div class="hide" id="hide">后显示</div>

            <div class="btn_go" id="go">点击变化</div>

        </div>

        <h2>注意：用animate效果的时候样式一定要定位</h2>

        <div style="height: 500px; background-color: rgb(34, 59, 99)" id="floor"></div>

        <div style="height: 500px; background-color: orangered"></div>

        <div class="btn_top" id="btnTop">scrollTop:top</div>

        <div class="btn_top_r" id="btnTop_r">offset().top</div>

    </div>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>

        $(function () {

            // 让指定元素左右移动

            $("#btnAnimate").on("click", function () {

                $(this).animate({

                    left: '+150px'

                }, "slow");

            });

            //在600毫秒内切换段落的高度和透明度

            $("#btnHo").on("click", function () {

                $("#btnAnimate").animate({

                    height: 'toggle',

                    opacity: 'toggle'

                }, "slow");

            });

            //用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

            $("#go").click(function () {

                $("#hide").animate({

                    width: "40%",

                    height: "100%",

                    fontSize: "20px",

                    left: 50,

                    opacity: 'show'

                }, 500);

            });

            $("#btnTop").on("click",function(){

                //html,body是兼容Firfox与Chrome

                $("html,body").animate({"scrollTop":top})

            })

            $("#btnTop_r").on("click",function(){

                $("html,body").scrollTop($("#floor").offset().top - 50)

            })

        });

    </script>

</body>

</html>

效果图：

jQuery中animate与scrollTop、offset().top实例的更多相关文章

  1. jQuery中animate()的方法以及$(&quot;body&quot;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...

  2. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  3. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  4. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  5. jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...

  6. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  7. scrollTop,offset().top

    1.scrollTop是指滚动条滚动的距离 如果没有出现滚动条,则距离为0 css: <style type="text/css"> *{ margin: 0; pad ...

  8. jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决

    $("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html" ...

  9. jQuery中Animate进阶用法（二）

    Step Type: Function( Number now, Tween tween )每个动画元素的每个动画属性将调用的函数.这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值. ...

随机推荐

  1. MS SQL Server 无法添加、更新或删除从msx服务器上发起的作业（或其步骤或调度）

    因为 服务器 的名字 更改过 use   msdb     go         SP_CONFIGURE   'ALLOW UPDATES',1   RECONFIGURE   WITH   OVE ...

  2. Node.js 项目打包

    Node项目基于Electron打包 Electron打包打包后项目.exe程序包含在文件夹中,基于Electron打包的基础上直接打包成exe程序 参考一 参考二 需求的软件环境: NSIS 2.4 ...

  3. [ShaderStaff] Vignette Effect

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:GLSL | C 最近在看Cardboard实现,其中关于畸变的着色器代码中有加入 晕影Vignette 效果的实现,固在 ...

  4. OpenCV学习笔记 - Video Analysis - 录制视频

    录制视频 使用自带摄像头录制一段5s的短视频 error & solution fourcc1 = cv2.CV_FOURCC(', 'v') 在实践过程中,运行这一行时报错: 原因分析 在o ...

  5. 新手C#重载、重写的学习2018.08.04

    重载:在同一类(class)中,使用相同的方法名称,不同的参数和(不一定)不同的返回值类型构造成的方法. 举例: class OverLoadTest { public void Hello() { ...

  6. 96. Unique Binary Search Trees (Tree; DP)

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  7. 25- 解决'python -m pip install --upgrade pip' 报错问题

    转载于:https://blog.csdn.net/cxs123678/article/details/80659273 再安装包的时候提示 You are using pip version 9.0 ...

  8. 怎样在Windows与Centos下的Linux间共享文件，如果mnt文件夹不显示，可能是mnt缺少共享支持

    mnt中的hgfs文件夹就是Linux系统中挂载共享文件的默认文件夹.有的人按步骤共享之后mnt中没有出现共享的文件,可能是因为你的mnt缺少共享支持. 此时可以在Terminal中输入:sudo m ...

  9. Linux enca命令

    一.简介 enca是Linux下的文件编码转换工具. 二.安装 http://dl.cihar.com/enca/   http://www.2cto.com/os/201404/295528.htm ...

  10. $_SERVER["HTTP_HOST"]

    $_SERVER["HTTP_HOST"]访问的网站的域名