<!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. Spring Boot入门简介-Maven配置

    一.简介 -- 简化Spring应用开发的一个框架: -- 整个Spring技术栈的一个大整合: -- J2EE开发的一站式解决方案. 二.背景: ① J2EE笨重的开发.繁多的配置.低下的开发效率. ...

  2. 机器学习在IC设计中的应用（二）--根据GBA时序结果来预测PBA

    本文转自:自己的微信公众号<集成电路设计及EDA教程> <机器学习在IC设计中的应用(二)--根据GBA时序结果来预测PBA> AOCV AOCV全称:Advanced OCV ...

  3. POJ_1221_DP

    http://poj.org/problem?id=1221 简单dp,dp[i][j]表示i被划分成首位>=j的方案数. dp[i][i]为1,i为偶数时dp[i][i/2]为2. 剩下的可以 ...

  4. 关于AR眼镜的小结

    根据IDC(International Data Corporation,国际数据公司,IDC是全球著名的信息技术.电信行业和消费科技咨询.顾问和活动服务专业提供商)的报告,2018年AR和VR的产值 ...

  5. 10-SpringMVC04

    FreeMarker 1.入门案例 1. 导包:freemarker.jar 2. 需要创建模板文件的路径:src/main/resources/template 3. 创建一个模板对象:hello. ...

  6. 最近很火的namebase羊毛, 手把手教你怎么薅

    闲话少说直接说步骤: 1. 羊毛 https://www.namebase.io/airdrop 要求条件: 1) 要有github账号 2) 2019年2月之前有16+个follower 3) 要有 ...

  7. tomcat 多端口 多容器 多域名 配置

    先强调一个原则: server下面可以有多个service,用于配置不同监听端口 service下面可以有多个Host,用于配置该端口下的不同域名 Host里可以包含多个Context,用于配置该端口 ...

  8. （数据科学学习手札77）基于geopandas的空间数据分析——文件IO

    本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 在上一篇文章中我们对geopandas中的 ...

  9. 【问题】多重继承时，super函数只初始化继承的第一个类，不初始化第二个类。

    class A(object): def __init__(self): print("init class A") class B(object): def __init__(s ...

  10. RPC（简单实现）

    笔者之前仅看过RPC这个单词,完全没有了解过,不想终于还是碰上了.起因:这边想提高并发量而去看kafka(最后折中使用了redis),其中kafka需要安装ZooKeeper,而ZooKeeper又与 ...