<!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. 行为型-命令模式（Command）

    装修新房的最后几道工序之一是安装插座和开关,通过开关可以控制一些电器的打开和关闭,例如电灯或者排气扇.在购买开关时,我们并不知道它将来到底用于控制什么电器,也就是说,开关与电灯.排气扇并无直接关系,一 ...

  2. blocking network call

    ［blocking network call］ 阻塞的网络调用: 1.gethostbyname(): does not return until it has succeeded or failed ...

  3. FP昨天的新单，今天交期回写到2020年

    昨天新单6900000053,回写交期到2020年.在此视图查看此单回写的日期V_OUT_SHIPMENT_PLAN_TESTS,可看到日期是2020年. 1.检查OUT_SHIPMENT_PLAN表 ...

  4. 9-eclispe中右键BuildPath没有了

    Eclipse 右上角的代码视图,选择Java就好了!

  5. How to Restart Qt Application

    How to restart QtApplication As we know, Restarting Application means to exit current application, t ...

  6. Red Hat 系列如何快速定制二进制内核 RPM 包？

    随着Linux服务器越来越多了,底层系统内核想要保持版本统一就需要定制专门的二进制安装包来便捷的升级和管理. RedHat系那当然就是使用rpmbuild来做定制化管理了. 今天我们分俩个部分(roo ...

  7. http://4526621.blog.51cto.com/4516621/1343369

    http://4526621.blog.51cto.com/4516621/1343369

  8. python机器学习工具包scikit-learn

    scikit-learn这个非常强大的python机器学习工具包 http://scikit-learn.org/stable/modules/generated/sklearn.svm.SVC.ht ...

  9. 20155318 2016-2017-2 《Java程序设计》第九学习总结

    20155318 2016-2017-2 <Java程序设计>第九学习总结 教材学习内容总结 学习目标 了解JDBC架构 掌握JDBC架构 掌握反射与ClassLoader 了解自定义泛型 ...

  10. Work at a KFC fast food restaurant

    During the summer holiday of 2005,I thought I should do some meaningful instead of at home and watch ...