如何准确的使用你所需效果的元素

$("#header")—— 获取id为”header”的元素

$("h3")—— 获取所有标签为的元素

$("div#content .photo")—— 获取所有内类为”photo”的元素

$("ul li")—— 获取所有内的元素

$("ul li:first")—— 获取内的第一个元素

1.简单的滑动版

$(document).ready(function(){

    $(".btn-slide" ).click(function (){

        $("#panel" ).slideToggle("slow" );

        $(this ).toggleClass("active" );

    });

});

2、折叠效果

$(document).ready(function(){

    $(".accordion h3:first").addClass("active");

    $(".accordion p:not(:first)").hide();



    $(".accordion h3").click(function(){

        $(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");

        $(this).toggleClass("active");

        $(this).siblings("h3").removeClass("active");

        });
});

$(document).ready(function(){

   $(".accordion2 h3").eq(2).addClass("active");

   $(".accordion2 p").eq(2).show();

   $(".accordion2 h3").click(function(){

    $(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");

    $(this).toggleClass("active");

    $(this).siblings("h3").removeClass("active");

   });
});

3、Chain-able过渡效果

$(document).ready(function(){

    $(".run").click(function(){

        $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)

         .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")

         .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")

         .animate({top: "0"}, "fast").slideUp().slideDown("slow") 

    return false;

    });
});

4、消失效果

$(document).ready(function(){

    $(".pane .delete").click(function(){

       $(this).parents(".pane").animate({ opacity: "hide"}, "slow");

    });
});

5、整个块元素点击效果

$(document).ready(function(){

   $(".pane-list li").click(function(){

      window.location=$(this).find("a").attr("href");

      return false;

   });
});

6、折叠面板

$(document).ready(function(){//hide message_body after the first one
    $(".message_list .message_body:gt(0)").hide();

    //hide message li after the 5th
    $(".message_list li:gt(4)").hide();

    //toggle message_body
    $(".message_head").click(function(){
        $(this).next(".message_body").slideToggle(500)return false;
    });

    //collapse all messages
    $(".collpase_all_message").click(function(){
        $(".message_body").slideUp(500)return false;
    });

    //show all messages
    $(".show_all_message").click(function(){
        $(this).hide()$(".show_recent_only").show()$(".message_list li:gt(4)").slideDown()
        return false;
    });
    //show recent messages only
    $(".show_recent_only").click(function(){
        $(this).hide()$(".show_all_message").show()$(".message_list li:gt(4)").slideUp()
        return false;
    });
});

7、动态悬停效果

$(document).ready(function(){
    $(".menu a").hover(function() {

        $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");

    }, function() {

        $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");

    });

});

$(document).ready(function(){

    $(".menu2 a").append("");

    $(".menu2 a").hover(function() {

        $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");

        var hoverText = $(this).attr("title");

        $(this).find("em").text(hoverText);

    }, function() {

        $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");

    });

});

8、模仿WordPress的评论后台

$(".pane:even").addClass("alt");

$(".pane .btn-delete").click(function(){

    alert("This comment will be deleted!");

    $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")

                .animate({ opacity: "hide" }, "slow")return false;
});

$(".pane .btn-unapprove").click(function(){

    $(this)).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")

                .animate({ backgroundColor: "#ffffff" }, "slow").addClass("spam")

    return false;

});

$(".pane .btn-approve").click(function(){

    $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")

                .animate({ backgroundColor: "#ffffff" }, "slow").removeClass("spam")

    return false;

});

$(".pane .btn-spam").click(function(){

    $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")

                .animate({ opacity: "hide" }, "slow")

    return false;

});
});

9、定义不同的链接样式

$(document).ready(function(){

    $("a[@href$=pdf]").addClass("pdf");

    $("a[@href$=zip]").addClass("zip");

    $("a[@href$=psd]").addClass("psd");

    $("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]").addClass("external").attr({ target: "_blank" });

});

10.图像替换

$(document).ready(function(){

    $("h2").append('');

    $(".thumbs a").click(function(){

        var largePath = $(this).attr("href");

        var largeAlt = $(this).attr("title");

        $("#largeImg").attr({ src: largePath, alt: largeAlt });

        $("h2 em").html(" (" + largeAlt + ")"); 

        return false;

    });
});