jquery 淡入淡出动画效果例子

最新推荐文章于 2024-10-30 19:10:39 发布

weixin_34195364

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量137

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tian-xin/p/8204047.html

版权

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>切换图片</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function fadeImage(imageFileName) { //创建一个名为fadeImage，参数为imageFileName的函数
var objImg = $("img:first"); //选择第一个img元素，将其存入变量objImg
objImg.fadeOut("slow"); //此img元素以较慢的速度淡出
setTimeout(function() { //延迟器：延迟1秒执行次函数
objImg.attr("src", imageFileName); //设置此img元素的src属性值为imageFileName
objImg.fadeIn("slow"); //新的img元素以较慢的速度淡入
}, 1000);
}

function img1() {
fadeImage("img/1.jpg"); //调用函数，并传参数为 img/1.jpg
}

function img2() {
fadeImage("img/2.jpg"); //调用函数，并传参数为 img/2.jpg
}

$(function() {
$("input[type=button]:first").toggle( //选择属性为type，值为button的第一个input标签，调用toggle（）--连续点击事件。
img2, img1 //调用img2和img1方法
);
});
</script>
</head>

<body>
<img src="img/1.jpg" width="640" height="400" />
<hr/>
<input type="button" value="切换图片" />
<p>jquery 淡入淡出动画效果例子。运用了toggle（）--连续点击事件、fadeIn（）--淡入事件、fadeOut--淡出事件、setTimeout（）--延迟器</p>
</body>

转载于:https://www.cnblogs.com/tian-xin/p/8204047.html