jQuery学习笔记之制作动画与特效
2012-02-26 21:16
751 查看
制作多级菜单(l1)show(),hide()
js代码
html代码
使用toggle()方法实现显隐切换
js代码
html代码
fadeOut(),fadeIn(),fadeTo()的区别
js代码
html代码
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>
相关文章推荐
- jQuery 学习笔记之 动画与特效
- jQuery学习笔记之(一)动画与特效
- jQuery学习笔记之jQuery的动画
- HTML5+jQuery制作温馨浪漫爱心表白动画特效
- JQuery学习笔记-JQuery的动画效果
- jQuery 学习笔记之七 (jQuery 动画)
- Jquery学习笔记——动画
- jquery插件开发学习笔记(四)——导航栏特效
- JQuery学习笔记(4)JQuery中的事件和动画
- jQuery学习笔记之jQuery动画效果
- JQuery学习笔记-JQuery的动画效果
- jQuery学习笔记--jQuery的动画
- JQuery学习笔记(六)——css操作、事件处理和动画
- JQuery学习笔记之自定义动画效果
- 【学习笔记】jQuery中的动画与效果
- jQuery学习笔记之jQuery动画效果
- jQuery学习笔记 —— 4. 动画
- HTML——jquery学习笔记+实例+动画效果+表格处理
- jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效
- jquery动画效果学习笔记(8种效果)