CSS display 属性

display 属性规定元素应该生成的框的类型。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
···	······

CSS display 属性（菜鸟驿站）

淡入淡出动画案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.ad{background: url("images/ad-pic.png") no-repeat;width: 300px;height: 194px;position: fixed;right: 10px;bottom: 10px;display: none;}.close{width: 20px;height: 20px;position: absolute;top: 2px;right: 5px;background-color: transparent;cursor: pointer;}</style>
</head>
<body>
<div class="ad"><div class="close"></div>
</div><script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {/*  // 1. 设置初始透明度var opacity = 0.3;var timer = setInterval(function () {opacity = opacity === 1 ? 0.3 : 1;$('.ad').fadeTo(500, opacity);}, 500);// 2. 关闭$('.close').click(function () {// 2.1 清除定时器clearInterval(timer);// 2.2  滑动$(this).parent().stop(true).slideUp(1000);});*/// $('.ad').delay(1000).slideDown(1000);// $('.ad').delay(1000).show(1000);// $('.ad').delay(1000).fadeIn(1000).delay(1000).fadeOut(1000);$(document).click(function () {$('.ad').fadeToggle(1000);})});
</script>
</body>
</html>

运行效果：右下角的广告，淡入淡出（一闪一闪），并且点击广告右上角的x，广告会向下滑消失。

【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例相关推荐

【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
JQuery动画之淡入淡出动画
1. 淡入动画 1.1 不带参数的淡入动画格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...
【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...
Android开发笔记（十五）淡入淡出动画TransitionDrawable
说到淡入淡出动画,可能大家会想到补间动画里面的AlphaAnimation,不过这个深浅动画只能对透明度做渐变效果,也就是只能对一个图形做深浅的颜色变换.如果我们想要从A图片逐渐变为B图片,也就是要实 ...
android动画鸿阳,18. Activity淡入淡出动画
本篇文章属于鸿洋大神博客学习笔记,鸿洋博客地址:http://blog.csdn.NET/lmj623565791/article/details/22990643 前言多数情况下,我们新建的And ...
android淡入淡出动画_在Android中淡入动画示例
android淡入淡出动画 1) XML File: activity_main 1)XML文件:activity_main <?xml version="1.0" enco ...
【转】WPF 窗体淡入淡出动画
[转]WPF 窗体淡入淡出动画第一种 <Window.Triggers><EventTrigger RoutedEvent="Window.Loaded" &g ...
Android App开发动画特效中帧动画和电影淡入淡出动画的讲解及实战（附源码和演示视频简单易懂）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.帧动画 Android的动画分为三类,帧动画,补间动画和属性动画.其中帧动画是实现原理最简单的一种,跟现实生活中的电影胶卷类似,都是在短时间内连续 ...
小程序 · Animation——淡入淡出动画效果
淡入淡出动画效果主要原理是通过控制透明度显示. WXML <view class="add-tip" animation=&quo ...

【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例

jQuery淡入淡出动画-右下角广告

CSS display 属性

淡入淡出动画案例

【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例相关推荐

最新文章

热门文章