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>