15.jQuery淡入淡出效果

fade方法包括四个:

(1)fadeIn(speed,callback):淡入的方法,speed代表淡入的速度,可以是slow,fast,毫秒,不填等

例如:

$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});

(2)fadeOut(speed,callback)方法:淡出的方法,参数的意义如上。

例如:

$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});

(3)fadeToggle(speed,callback)方法:可以同时切换淡入淡出。

例如:

$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});

(4)fadeTo(speed,opacity,callback)方法:允许渐变为给定的不透明度(值介于 0 与 1 之间),相当于不是淡入或者淡出完全不见,而是淡出到一个程度,有了一个透明度。

例如:

$("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

});

原文地址:https://www.cnblogs.com/wangdh666/p/10808287.html

时间: 2024-10-06 16:58:24

15.jQuery淡入淡出效果的相关文章

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()

jQuery淡入淡出效果轮播图

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

淡入淡出效果 (jQuery)

1jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果.常见的淡入淡出动画正是这样的原理. fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果 所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏. .fa

【jQuery】利用淡入淡出效果实现兼容IE6的告警提示

其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择jQuery,是因为这东西能够很好地兼容IE6. 一.基本目标 当输入框的输入内容的字符数无论中文与英文大

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()学习引发的思考----关于Jquery函数传参数

一.基本语法 1.fadeIn淡入.fadeOut淡出.fadeToggle淡入淡出切换(已经淡出点击淡入,或者相反): $(selector).fadeIn(duration,complete); $(selector).fadeOut(duration,complete); $(selector).fadeToggle(duration,complete); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"(200ms)."fast"(600

jQuery(5)——jQuery fade淡入淡出效果

jQuery fade淡入淡出效果 淡入淡出效果是基于透明度的变换而实现的.在测试demo的时候可以在控制台查看elements中的opacity的变换 在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo() 语法 $(selector).fadeXXX(speed,callback); 他们都可以有两个可选参数: 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"

jQuery淡入淡出轮播图实现

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

javascript 图片淡入淡出效果 实例源代码

? 1 代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.<br>后面还有对js代码的详细说明,希望大家好好消化,好好理解.<br><br>html源代码: 1 <head> 2 <title>图片切换</title> 3 <script type="text/javascript" src="图片切换.js"></script> 4 <l

js淡入淡出效果实例代码

js淡入淡出效果实例代码:现在的网页要求美观平滑,所以很多让元素消失的效果也也需要有一个过渡过程,这样看起来更为平缓美观,本章节提供了一个代码实例,可以轻松的实现让元素淡入淡出效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com