需求效果

标题自动淡入淡出，当点击“动画结束时”，标题停止执行动画

<!DOCTYPE html>
<html lang="en">
<head><!-- 第一个meta指定编码,IDEA新建默认就有的，与Bootstarp无关第二个meta指定IE8强制以低版本进行渲染,与Bootstrap无关第三个meta指定Bootstrap以移动设备优先，采用响应式布局--><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 除了使用第一种方式，还可以提供官方(BootCDN)的给的CDN加速器引入文件同样是css、js文件，只是引入的方式不同而已，如果项目不能连接外网，这种方式是不行的--><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，只需去复制来即可BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><script type="text/javascript">$(function () {/**对h2执行动画*/hFlout($("h2"), 2000, 0, 0);/** 停止动画*/$("#finish").click(function () {$("h2").stop();});});/*** 控制某个元素不断的透明度降为0，然后透明度又升为1* @param jQueryObj ：待操作的 Jquery对象* @param speed ：速度* @param opacity ：透明度* @param isShow ：1表示显示，0表示隐藏*/function hFlout(jQueryObj, speed, opacity, isShow) {jQueryObj.fadeTo(speed, opacity, function () {/** 当本次为隐藏时，下次应该为显示*/if (isShow == 0) {isShow = 1;opacity = 1;} else {/** 当本次为显示时，下次应该为隐藏*/isShow = 0;opacity = 0;}/**方法回调，循环动画*/hFlout(jQueryObj, speed, opacity, isShow);});}</script><title>Bootstrap Study</title>
</head>
<body>
<h2>3 组 1 号 请耐心等待主持人开始......</h2>
<button id="finish">动画结束</button>
</body>
</html>

JQuery 动画之淡入淡出相关推荐

JQuery动画之淡入淡出动画
1. 淡入动画 1.1 不带参数的淡入动画格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...
使用C++实现多张BMP图片转换为YUV动画----附加淡入淡出转场（逐渐变明变暗），及垂直滑像转场（逐行渐变）
使用C++实现多张BMP图片转换为YUV动画----附加淡入淡出转场(逐渐变明变暗),及垂直滑像转场(逐行渐变) 一.BMP图像简介 1.BMP图像是什么? 2.BMP图像文件结构 1)图象文件头 2 ...
html淡化效果,jQuery实现基本淡入淡出效果的方法详解
本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元 ...
android gone动画_Android动画之淡入淡出
为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...
jQuery实现一个淡入淡出下拉菜单非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...
html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: ...
jQuery标题文字淡入淡出显示效果
reveal-it.js是一款jQuery文字淡入淡出显示特效插件.该文字特效插件可以使文字从左向右淡入淡出显示.该jq插件小巧简单,非常适合用于制作标题文字的动画效果. 在线演示:http://ww ...
浅尝flutter中的动画（淡入淡出）
在移动端开发中,经常会有一些动画交互,比如淡入淡出,效果如图: 因为官方封装好了AnimatedOpacity Widget,开箱即用,所以我们用起来很方便,代码量很少,做少量配置即可,所以,全部代码 ...
【每天一个JQuery特效】淡入淡出显示或隐藏窗口（1）
为什么80%的码农都做不了架构师?>>> 我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记. 本特效主要采用fa ...
Vue动画的淡入淡出效果
今天呢,我们来利用vue动画实现以下淡入淡出效果在vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画主要通过6个类名来控制进入(显示,创建) v-en ...

JQuery 动画之淡入淡出

需求效果

JQuery 动画之淡入淡出相关推荐

最新文章

热门文章

JQuery 动画之 淡入淡出

需求效果

JQuery 动画之 淡入淡出相关推荐

最新文章

热门文章

JQuery 动画之淡入淡出

JQuery 动画之淡入淡出相关推荐