jQuery实例

实例一:图片切换

	$(function(){
		$(".tab li").mouseenter(function(){
			$(this).addClass("active").siblings().removeClass("active");
			$(".main").eq($(this).index()).addClass("selected").siblings().removeClass("selected");
		})
	})
	 	

实例二:轮播

	$(function(){
		var idx = 0;
		$(".wrap ol li").mouseenter(function(){
			idx += 1;
			$(this).addClass("active").siblings().removeClass("active");
			$(".wrap ul li").eq($(this).index()).css({"left":650,"z-index":idx}).animate({"left":0},300)
		})
	})
	 	

实例三:手风琴效果

	 	$(function () {
            $(".wrap li").each(function (i,ele) {
                $(this)
                        .css("background-image","url(img/" + (i + 1) +".png)");
            }).mouseenter(function () {
                $(this).stop().animate({
                    "width":600
                },300).siblings().stop().animate({
                	"width":100
                },300)
            }).mouseleave(function (a) {
                $("li").stop().animate({
                    "width":200
                },300)
            });
        })
	 	

实例四:天猫广告

	$(function(){
		$("#left li").mouseenter(function(){
			$("#center li").eq($(this).index()).show().siblings().hide()
		})
		$("#right li").mouseenter(function(){
			$("#center li").eq($(this).index()+9).show().siblings().hide()
		})
	})
	 	

实例五:网页角部广告

	    $(document).ready(function(){
			$("#zhaotiancheng").slideDown().click(function(){
				$(this).fadeOut()
			})
		})
	 	

实例六

	 	$(function(){
			$(".box").mouseenter(function(){
				$(".inbox").eq($(this).index()).show().stop().animate({
					"width":300
				},300)
				$(".inbox2").eq($(this).index()).fadeOut()
			}).mouseleave(function(){
				$(".inbox").eq($(this).index()).css({"width":0}).hide()
				$(".inbox2").eq($(this).index()).slideDown()
			})
		})