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>

转载于:https://www.cnblogs.com/suguoqiang/archive/2012/02/26/2369047.html

来源：https://blog.csdn.net/weixin_30756499/article/details/99131465

标签

jquery动画

jquery