<!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. 基于Arduino开发的简易“高水位报警系统解决方案”

    长期以来,针对“某些办公室空调没有排水系统,只能用水桶接水,经常造成水漫金山的问题”而提出来的. 材料:Arduino开发板一块.水位传感器一个.高电平蜂鸣器一个.杜邦线若干. 原理:将水位传感器置于 ...

  2. C++ 类模板详解(一)：概念和基本使用方式

    与函数模板类似地(C++函数模板详解(一):概念和特性) ,类也可以被一种或多种类型参数化.例如,容器类就是一个具有这种特性的典型例子,它通常被用于管理某种特定类型的元素.只要使用类模板,我们就可以实 ...

  3. Hibernate(六)

    ================================缓存============================定义:介于应用程序和永久性数据存储源之间,可以复制数据存储源中的数据. 工作 ...

  4. 开源虚拟机Bochs安装以及踩坑

    因为想要写一个简单的操作系统,所以需要安装虚拟机来模拟出硬件,VMware不适合这个场景,因为会使用硬件级别的虚拟化,而bochs这个开源虚拟机,是用软件虚拟了所有的硬件,所以调试可以做到非常细的粒度 ...

  5. c++中重载运算符

    重载运算符 1,成员函数运算符 运算符重载为类的成员函数一般格式如下 <函数类型> operator <运算符> (参数表) {函数体} 调用成员函数运算符如下 <对象名 ...

  6. 九 Shell中的数组

    数组:用一个变量存储一组数据,并能够对这组数据中的某一个数据单独操作. 数组的类型:一维数组.二维数组.多维数组 变量的类型 Shell中默认无类型 变量的值默认均视为文本 用在数字运算中时,自动将其 ...

  7. 三、通过 FactoryBean 来配置bean

    一般情况下,Spring 通过反射机制利用 <bean> 的 class 属性指定实现类实例化 Bean ,在某些情况下,实例化 Bean 过程比较复杂,如果按照传统的方式,则需要在 &l ...

  8. 如何为wordpress 的文章添加分页

    原文参考:http://www.wpdaxue.com/add-next-page-button-wordpress-post-editor.html 1.在编辑文章时切到text 模式,然后加上&l ...

  9. CCF_ 201403-3 _命令行选项

    不要怀疑,这题跟CCF_201604-3_路径解析一样恶心,很多中情况,要仔细读题,注意细节. 写的比较乱. #include<iostream> #include<cstdio&g ...

  10. SpringBoot项目版本升级：从1.5.3升级到2.1.8版本

    SpringBoot项目版本升级:从1.5.3升级到2.1.8版本 前言 简单记录一次本人在自己的SpringBoot项目project-template中,把1.5.3版本升级到2.1.8版本时升级 ...