JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )

$('#div1').fadeIn(1000); //渐变显示。1000毫秒，表示动画显示过程时间。
$('#div1').fadeOut(1000); //渐变隐藏
$('#div1').fadeToggle(1000); //合成显示隐藏
$('#div1').fadeTo(1000,0.5); //半透明显示到0.5。 CSS属性opacity 透明度(0-1)。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>渐变显示隐藏动画</title><style>#div1 {width:100px; height:100px;background-color:black;}</style><script src="scripts/jquery-1.7.1.min.js"></script><script>$(function() {//渐变显示按钮$('#btnFadeIn').click(function(){//$('#div1').fadeIn();$('#div1').fadeIn(1000);  //1000毫秒，表示动画渐变过程时间。});//渐变隐藏按钮$('#btnFadeOut').click(function(){//$('#div1').fadeOut();$('#div1').fadeOut(1000);});//合成按钮$('#btnTotal').click(function(){//$('#div1').fadeToggle();$('#div1').fadeToggle(1000);});//半透明显示按钮$('#btnBan').click(function(){$('#div1').fadeTo(1000,0.5);  //半透明显示到0.5。 CSS属性opacity 透明度(0-1)。});});</script>
</head>
<body><input type="button" id="btnFadeIn" value="显示"/><input type="button" id="btnFadeOut" value="隐藏"/><input type="button" id="btnTotal" value="合成"/><input type="button" id="btnBan" value="半透明"/><div id="div1"></div>
</body>
</html>

JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )相关推荐

jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
jquery的淡入,淡出事件 fadeIn fadeOut
jquery的淡入,淡出事件 fadeIn fadeOut 1. fadeIn() 方法使用淡入效果来显示被选元素,(该元素是隐藏的) $(selector).fadeIn(speed,callb ...
jquery效果显示隐藏滑入滑出
jquery jquery效果 jquery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 滑入滑出:slideDown() / sl ...
jquery animate 显示隐藏
jquery 中 animate(动画) 显示隐藏需要使用 opacity(透明度:0跟1), 使用display和visibility 是无效的.
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
Jquery之显示/隐藏元素
不带任何效果的隐藏元素: hide()方法带参的方法:以优雅的动画隐藏匹配的所有元素隐藏匹配元素: hide([speed],[callbackfunction]) 可选参数: speed:毫秒( ...
android布局中显示隐藏动画
android 在布局中提供属性,能简单的加入动画效果,例如以下: <LinearLayout...animateLayoutChanges="true"... /> ...
react显示隐藏动画
通过className的true或者false控制元素显示或者隐藏. App.js import React, { Component } from 'react'; import './App.cs ...

JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )

JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )相关推荐

最新文章

热门文章