<!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. 应用层vc实现三种文件监视方法

    http://hi.baidu.com/sadusaga/item/daa0d4b764c6dd76254b09cc http://bbs.csdn.net/topics/280032788 http ...

  2. 当你的程序在朋友的机器上显示丢失msvcr100d.dll的时候

    0. 给朋友发了个DEMO,收到提示:丢失 msvcr100d.dll 1. 一看是运行库文件,赶紧让朋友下载并安装vc++ 2010 redistribution,朋友反馈还是提示丢失这个dll文件 ...

  3. python列表与元祖

    python 的列表和元素: 共同点:有序的 区别:1.列表可以修改增加删除列表内容,元组不能修改 联系:元组中包含列表的元素,可以修改列表元素. 分析:1.列表:LIST1=[1,2,3,4,5,6 ...

  4. Redis Cluster 介绍与搭建

    转:http://blog.csdn.net/men_wen/article/details/72853078 Redis Cluster 介绍与搭建 1. Redis Cluster介绍 Redis ...

  5. javascript 动态加载javascript文件

    /* loadFile(data, callback): 动态加载js文件 data: 存放需要加载的js文件的url("url" || ["url", &qu ...

  6. ceph集群部署

    最近在学习 kubernetes 过程中,想实现 pod 数据的持久化.在调研的过程中,发现 ceph 在最近几年发展火热,也有很多案例落地企业.在选型方面,个人更加倾向于社区火热的项目,Gluste ...

  7. Java Stack使用

    1.Stack继承自Vector.遵从先进后出的规则. 2.Stack 是线程同步的.(map.List.Set是线程不同步的,需要在外部封装的时候来同步) 试例代码: public static v ...

  8. ubuntu python及python IDLE 的安装

    ubuntu下Python的安装和使用 文章参考出处:https://www.cnblogs.com/luckyalan/p/6703590.html ubuntu14.04 安装Python2.7: ...

  9. 领域驱动设计(DDD)实践之路(一)

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/gk-Hb84Dt7JqBRVkMqM7Eg  作者:张文博 领域驱动设计(Domain Dr ...

  10. phpstorm设置debug调试

    先去下载xdebug.dll文件.将下面自己的phpinfo的文字信息复制到https://xdebug.org/wizard.php中,下载它提供的xdebug.dll的版本 下载完成后将php_x ...