欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)_jquery

程序员文章站 2022-05-18 11:44:02
...
复制代码 代码如下:

#img1

{

width:400px; height:500px;

}

$(function () {

$('#Button1').bind('click', function () {

$('img').fadeOut(2000, function () {

$('#Button1').val('哎,没了'); //图片的消逝

});

})

$('#Button2').bind('click', function () {

$('img').fadeIn(2000, function () {

$('#Button2').val('有了'); //图片的呈现

});

})

$('#Button3').bind('click', function () {

$('img').fadeTo(2000, 0.3, function () {

alert('画动执行终了'); //图片透明度

});

})

$('#Select1').bind('change', function () { //可是以change或者是click事件

$('img').fadeTo(1000, $('#Select1 option:selected').val());

})

})

jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)_jquery