<!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. python学习Day7--字符串操作

    [主要内容] 1. 补充基础数据类型的相关知识点 1. str. join() 把列表变成字符串 2. 列表不能再循环的时候删除. 因为索引会跟着改变 3. 字典也不能直接循环删除. 把要删除的内容记 ...

  2. 在Centos上安装docker，部署mysql数据库

    何为docker? Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. 本机环境 24小时不关机的Centos ...

  3. HDU_1175_dfs

    http://acm.hdu.edu.cn/showproblem.php?pid=1175 dfs(x,y,i,num),xy表示位置,i表示方向,num表示转向次数,num=2时候的剪枝很重要. ...

  4. Zabbix：主动模式

    简介 Zabbix 是由 Alexei Vladishev 开发的一种网络监视.管理系统,基于 Server-Client 架构.可用于监视各种网络服务.服务器和网络机器等状态,官方站点:https: ...

  5. ASP.NET Core 2.2 WebApi 系列【九】使用SignalR (作者:tenghao510 ) 学习及内容补充

    原文地址:  ASP.NET Core 2.2 WebApi 系列[九]使用SignalR 今天,看到了大牛的这篇博文,  发了一下评论, 我很惊喜, 没想到他很快就回复了我,  而且通过QQ帮助了S ...

  6. [C/C++]const限定符总结

    const限定符 const是一种限定符,被const所限定的变量其值不可以被改变. const的初始化 由于const一旦创建其值就不能够被改变,所以我们必须对其进行初始化 const int a; ...

  7. 2020牛客寒假算法基础集训营4 E：最小表达式

    E:最小表达式 考察点 : 贪心,高精度 坑点 : 高精度一定不要写错,一定一定不要写错 剩下的就是细节问题 侃侃 : 1.字符串长度达到 5e5,如果要涉及到加法,乘法,普通的肯定会爆 long l ...

  8. Transformer 详解

    感谢:https://www.jianshu.com/p/04b6dd396d62 Transformer模型由<Attention is all your need>论文中提出,在seq ...

  9. 2020 年 中国.NET开发者调查报告

    微信公众号dotnet跨平台2020年初做的一个关于中国.NET开发者调查收到了开发者近 1400 条回复.这份调查报告涵盖了开发者工具链的所有部分,包括编程语言.应用架构.应用服务器.运行时平台.框 ...

  10. JWT实现token-based会话管理（转）

    JWT实现token-based会话管理   阅读目录 认识JWT demo要点说明 小结 上文<3种web会话管理的方式>介绍了3种会话管理的方式,其中token-based的方式有必要 ...