jQuery淡入淡出元素让其效果更为生动

2024-10-04 09:07:38

为了达到更为生动的效果，可以把一个元素淡出或淡入，在任何一种情况下，都只是随着时间来改变元素的透明度。jQuery提供了3个和淡入淡出相关的函数：

·fadeIn()使得一个隐藏的元素淡入视野。首先，元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走)；然后，元素逐渐地变得可见。如果元素在页面上已经可见，则这个函数没有任何效果。如果没有提供一个速度值，元素使用“常规”设置来淡入(400毫秒)。

·fadeOut()通过使得一个可视的元素像幽灵般地淡出视线来隐藏它。如果元素在页面上已经隐藏，这个函数没有任何效果，这和fadeIn()函数一样。如果没有提供一个速度值，元素以400毫秒的速度淡出。

·fadeToggle()组合了淡入和淡出的效果。如果该元素当前是隐藏的，它会淡入视线中；如果它当前是可见的，该元素会淡出视线。可以使用这个函数让一个提示框出现在页面上或从页面消失。例如，假设有一个按钮，其上显示单词“instructions”。当访问者单击该按钮的时候，带有说明的一个div将淡入视线；再次单击该按钮，将会使说明淡出视线。要让该提示框每半秒钟淡入或淡出一次，可以这样编写代码：

$('#button').click(function(){
$('#instructions').fadeToggle(500);
})；//end click

·fadeTo()的工作方式和其他两个效果函数略有不同。它把图像淡化到一定的透明度。例如，可以让图像淡化到半透明。和其他效果不同，必须提供一个速度值。此外，还提供0～1之间的一个值来表示元素的透明度。例如，要把所有的段落淡化到75%的透明度，可以这样编写代码：

$('p').fadeTo('normal'，.75);

这个函数改变了一个元素的透明度，而不管这个元素是可见的还是不可见的。例如，假设要把当前隐藏的一个元素淡化到50%的透明度。然后，如果使用 show()或fadeIn()显示该元素，它会以50%的透明度显示。同样，如果隐藏一个半透明的元素，然后再显示它，它的透明度设置还是会恢复。

jQuery 淡入淡出、展开收缩菜单实现代码

效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo
基于jquery实现的文字淡入淡出效果

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=
原生js和jquery实现图片轮播淡入淡出效果

图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
jquery实现提示语淡入效果

效果图: 话不多说,请看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> jque
基于Jquery的淡入淡出的特效基础练习

今天练习了个Jquery淡入淡出的特性代码如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法

往带有png图的类里加红色字的部分复制代码代码如下: background-image:url(******.png)!important;background-image:url(../images/space.gif);/*space.gif 是一个透明的图片文件*/filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=sca
jquery 淡入淡出效果的简单实现

样式: 复制代码代码如下: <style type="text/css"> #win { width: 98%; position: absolute; display: none; float:left; } /*控制关闭按钮的位置*/ #close { margin-left: 155px; c
基于jQuery的淡入淡出可自动切换的幻灯插件

其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; 复制代码代码如下: <script src="http://ajax.googleapis.com/ajax/libs/jqu
基于jquery的淡入淡出选项卡效果代码

经典选项卡 .tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;} .tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;} .tab dt strong{padding:0 15px;color:#444;} .tab dt a{dis
jquery实现通用版鼠标经过淡入淡出效果

复制代码代码如下: <a class="jq_btn" href="#"><div></div></a> //鼠标移上去效果 $(".jq_btn").hover(function(){ $(this).find("div").stop().fadeIn(); },function(){ $(this).find("div").stop().fadeOut(

jQuery淡入淡出元素让其效果更为生动

相关推荐

随机推荐