<!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>Document</title>

</head>

<body style="height:2000px">

    <div style="margin-top:1000px;overflow: hidden;">

        <div id="demo" style="width: 500px;height: 300px; background-color: red;transition: all 1s; opacity: 0.1;"></div>

    </div>

</body>

</html>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"

    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>

    $(window).scroll(function (e) {

        //元素

        var demo = $("#demo");

        //滚动条滚动的高度

        var scrollTop = $(document).scrollTop();

        //浏览器可视化区域的高度

        var docHeight = $(window).height();

        //滚动最小位置，开始动画

        var mintop = demo.offset().top + demo.height() - docHeight;

        //滚动最大位置，开始动画

        var maxtop = demo.offset().top;

        //在一定范围内，开始过度动画，出了范围，就将过度动画还原为未执行时的样式

        if(mintop <= scrollTop && maxtop >= scrollTop){

            //开始动画

            demo.css({

                "opacity":1,

                "margin-left":"500px"

            })

        }

        else{

            //还原动画

            demo.css({

                "opacity":0.1,

                "margin-left":"0px"

            })

        }

    });

</script>

　　

css过渡——实现元素的飞入飞出的更多相关文章

  1. HTMO DOM部分---小练习；列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。

    一:列表之间数据移动 第一个列表里面有内容,第二个里面没有 实现功能: 点击左侧列表选中一项内容,点击按钮,复制到右侧 点击复制所有按钮,将左侧列表所有数据,复制到右侧 扩展功能:右侧列表实现去重复 ...

  2. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  3. android自己定义控件之飞入飞出控件

    近期呢,本人辞职了.在找工作期间.不幸碰到了这个求职淡季,另外还是大学生毕业求职的高峰期,简历发了无数份却都石沉大海.宝宝心里那是一个苦啊! 翻着过去的代码,本人偶然找到了一个有意思的控件.那时本人还 ...

  4. 【转】C#窗体飞入飞出的动画效果(Api)

    [System.Runtime.InteropServices.DllImport("user32")] private static extern bool AnimateWin ...

  5. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  6. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  7. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  8. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  9. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

随机推荐

  1. JS刷算法题：二叉树

    Q1.翻转二叉树(easy) 如题所示 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 来源:力扣(LeetCode) ...

  2. 拒绝低效！Python教你爬虫公众号文章和链接

    本文首发于公众号「Python知识圈」,如需转载,请在公众号联系作者授权. 前言 上一篇文章整理了的公众号所有文章的导航链接,其实如果手动整理起来的话,是一件很费力的事情,因为公众号里添加文章的时候只 ...

  3. 在Navicat新建用户

    1.Ctrl+Q,进入查询,创建表空间. 输入create tablespace test datafile 'D:\Oracle\test.ora' size 1000m; 这里的test为表空间名 ...

  4. 【限时免费】近1000G JAVA学习视频下载

    2020的情人节是个极特殊的情人节,面对肆虐的疫情,我们无法出门,宅在家里,也无法阻止你作为一名优秀程序员的梦想. 或许没有鲜花.没有蛋糕…… 姜小白就为大家备好了一份大礼,将自己近几年整理收藏的全网 ...

  5. 在form子句中使用子查询时的注意事项

    今天中午为了弄清这个问题,本人真的是头都搞大了!最后明白了一点,在from子句中使用子查询是,一定要将临时表的别名带上,否则会灰常痛苦!!!

  6. 牛客练习赛34 D little w and Exchange(归纳)

    题意: 给n个数,和m 问这组数是否可以构成[1, m]中的每一个数 思路: 先将a数组排序. 先算算构成前几个数需要什么,至少需要a[1]=1 需要a[2] = 1,2 在a[2] = 1的情况下a ...

  7. Codeforces 977D Divide by three, multiply by two（拓扑排序）

      Polycarp likes to play with numbers. He takes some integer number xx, writes it down on the board, ...

  8. （四）mybatis逆向工程

    构建 逆向工程就是说通过数据库当中的表生成class,mapper,接口,不需要自己编写那些,很方便.跟symfony里面的自动生成是一样的:视频里的人说用的不多,但我觉得很方便呀 具体步骤,首先导入 ...

  9. ESXi以及WorkStation缩减thin provision模式Linux虚拟机磁盘的方法

    1. 公司的服务器采用ESXi 进行管理. 有时候为了灵活性,需要将虚拟机从ESXi服务器上面导出来. 放置到不同的客户机器上面去. 2. 但是发现,比如我在linux里面安装了Oracle数据库, ...

  10. 【Codeforces #312 div2 A】Lala Land and Apple Trees

    # [Codeforces #312 div2 A]Lala Land and Apple Trees 首先,此题的大意是在一条坐标轴上,有\(n\)个点,每个点的权值为\(a_{i}\),第一次从原 ...