jQuery淡入淡出元素的方法

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

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

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

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

  1. $(‘#button‘).click(function(){
  2. $(‘#instructions‘).fadeToggle(500);
  3. });//end click

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

  1. $(‘p‘).fadeTo(‘normal‘,.75);

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

文章来源网页编程,转载请注明出处:http://uphtm.com/js/147.html

时间: 2024-07-30 10:17:03

jQuery淡入淡出元素的方法的相关文章

详细介绍jQuery淡入淡出元素的方法

转载请注明出处:http://www.uphtm.com/js/147.html 为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度.jQuery提供了3个和淡入淡出相关的函数: ·fadeIn()使得一个隐藏的元素淡入视野.首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走):然后,元素逐渐地变得可见.如果元素在页面上已经可见,则这个函数没有任何效果.如果没有提供一个速度值,元素使用“常规”设置来淡入(400毫秒). ·fad

jQuery淡入淡出轮播图实现

大家好我是QD小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果明显感觉好了许多.现在我就来分享下自己写轮播图的思路和方法. HTML部分: <div id="img-box" style="width:700px; height:350px;"> <img style="opacity: 1;" wid

Jquery淡入淡出轮播图

Jquery淡入淡出轮播图 因为代码不多所以我就写一个html文件里了 html代码 <div class="banner"> <ul> <li><a href="javascript:;"><img src="./1 (1).png" /></a></li> <li><a href="javascript:;"><

jQuery 淡入淡出

演示 jQuery fadeIn() 方法: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 $("#div1").fadeIn(); 9 $("#di

210 jQuery淡入淡出:fadeIn() 、fadeOut() 、fadeToggle() 、fadeTo()

淡入淡出动画,常见有四个方法:fadeIn() .fadeOut() .fadeToggle() .fadeTo() ? 语法规范如下: 代码演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

jQuery淡入淡出

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淡入淡出</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src=&q

JQuery 的选取元素 和 方法

jQuery 选择选取元素 jQuery选择器 ID选择器(js一般尽量用ID选择器,效率最高) $("#id").html(); 类选择器 $(".className").text(); 标签选择器 $('p').click() 属性选择器 $("li[id]"). $("li[id='link']").fadeIn(); 层级选择器 $("li .link").show(); 父子选择器 $("

jQuery淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

jQuery淡入淡出效果

<!DOCTYPE html><html><head><meta charset="utf-8"><title>淡入淡出效果</title><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function()