jQuery学习笔记之制作动画与特效

制作多级菜单(l1)show(),hide()

js代码

$(function () {
$("li:has(ul)").click(function (e) {
if (this == e.target) {
if ($(this).children().is(":hidden")) {
$(this).css("list-style-image", "url(Img/minus.gif)").children().show();
}
else {
$(this).css("list-style-image", "url(Img/plus.gif)").children().hide();
}
};
return false; //避免不必要的事件混绕
}).css("cursor", "pointer").click();

$("li:not(:has(ul))").css({ "cuaor": "default", "list-style-image": "none" });
});

html代码

    <div>
<ul>
<li>信息学院
<ul>
<li>计算机科学与技术</li>
<li>电子技术教育</li>
</ul>
</li>
<li>外语学院
<ul>
<li>应用英语</li>
<li>英语教育</li>
</ul>
</li>
<li><a>物理学院</a></li>
<li><a>人文学院</a></li>
<li><a>生科学院</a></li>
</ul>
</div>



使用toggle()方法实现显隐切换

js代码

fadeOut(),fadeIn(),hide(),show()的区别
$(function () {
$("p").css("border", "1px solid #FF0000");
$("input:eq(0)").attr("value", "FadeOut").click(function () {
$("img").fadeOut(3000);
});
$("input:eq(1)").attr("value", "FadeIn").click(function () {
$("img").fadeIn(1000);
});
$("input:eq(2)").attr("value", "Hide").click(function () {
$("img").hide(3000);
});
$("input:eq(3)").attr("value", "Show").click(function () {
$("img").show(1000);
});
});

html代码

    <input type="button" />
<input type="button" />
<input type="button" />
<input type="button" />
<p><img alt="美图" src="Img/Img2.jpg" /></p>



fadeOut(),fadeIn(),fadeTo()的区别

js代码

$(function () {
$("p").css("border", "1px solid #FF0000");
$("input:eq(0)").attr("value", "FadeOut").click(function () {
$("img").fadeOut(1000);
});
$("input:eq(1)").attr("value", "FadeIn").click(function () {
$("img").fadeIn(1000);
});
$("input:eq(2)").attr("value", "FadeTo 0.5").click(function () {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").attr("value", "FadeTo 0").click(function () {
$("img").fadeTo(1000, 0);
});
});

html代码

    <input type="button" />
<input type="button" />
<input type="button" />
<input type="button" />
<p><img alt="美图" src="Img/Img2.jpg" /></p>

 


 

posted @ 2012-02-26 21:16  Ghost Soar  阅读(162)  评论(0编辑  收藏