jQuery动画效果之fadeIn,fadeOut(淡入淡出)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>淡入淡出</title></head><body><div id="div1" style="height: 200px;width:200px;background-color: rebeccapurple;display:none"></div><input type="button" value="fadeIn" id="fadeIn"><input type="button" value="fadeOut" id="fadeOut"><input type="button" value="fadeTaggle" id="fadeToggle"><input type="button" value="fadeTo" id="fadeTo">

<script src="jquery-3.4.1.js"></script><script>    $(‘#fadeIn‘).click(function () {        $(‘#div1‘).fadeIn(1000);

    });    $(‘#fadeOut‘).click(function () {        $(‘#div1‘).fadeOut(1000);    });    $(‘#fadeToggle‘).click(function () {        $(‘#div1‘).fadeToggle(1000);    });    $(‘#fadeTo‘).click(function () {        $("#div1").fadeTo(1000,0.3);//调整透明度    });

</script>

</body></html>

原文地址:https://www.cnblogs.com/startl/p/12330601.html

时间: 2024-08-08 17:17:57

jQuery动画效果之fadeIn,fadeOut(淡入淡出)的相关文章

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggle() 方法来切换 hide() 和 show() 方法. parents 找到每个span元素的所有祖先元素. $("span").parents() 找到每个span的所有是p元素的祖先元素. $("span").parents("p") 1 &

jQuery自学笔记(三):jQuery动画效果

jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒,可选的 callback 参数是隐藏或显示完成后所执行的函数名称. 一个关于调用callback函数的实例: $("

jQuery 动画效果

在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用 JavaScript 动画效果来取代 flash.这里说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 一.显示.隐藏 jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显 示内容和隐藏内容. $('.show').click(function(){

一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. JQuery效果-隐藏和显示 .show()让隐藏的元素显示.效果为:同时修改元素的高度.宽度.opacity属性 .hide()让显示

jquery动画效果

1.基本show()显示效果$(document).ready(function(){ $("button").click(function(){ //$(".one").show(); $(".one").show("slow"); });});hide()隐藏效果$(document).ready(function(){ $("button").click(function(){ $(".he

Jquery动画效果设置大全

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> <style ty

jQuery动画效果(借鉴他人的)

(1)jquery中常见的几种动画效果 (2)动画队列执行的顺序 对于一组元素上的动画效果,有如下两种情况: a) 当在一个animate()方法中应用多个属性时,动画是同时发生的. b) 当以链式的写法应用动画方法时,动画是按照顺序发生的. 对 于多组元素上的动画效果,有如下情况: a) 默认情况下,动画都是同时发生的. b) 当以回调的形式应用动画方式时,动画是按照回调顺序发生的. 另外,在动画方法中,要注意其他非动画的方法会插队,例如css()方法,要使这些非动画的 方法也按照顺序来执行,

jquery动画效果总结

一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms 二.禁用jquery的动画 将jQuery.fx.off设置为true即可 $(".stopping").click(function(){ jQuery.fx.off = true;//禁用所有jquery的动画 }) 三.jquery动画是异步的调用动画方法时会立刻返回,动画则在"后台"执行,也就是方法会在动画之前完成,所以可以给动画方法添加第二个参数 $("#