javascript之jquery 动画

show()和hide()控制显示和隐藏

$("#panel h5.head").toggle(function(){
        $(this).next().hide();
        },function(){
        $(this).next().show();
        })
$("#panel h5.head").toggle(function(){
        $(this).next().hide(600);
        },function(){
        $(this).next().show(600);
        })
$("#panel h5.head").toggle(function(){
        $(this).next().fadeOut();
        },function(){
        $(this).next().fadeIn();
        })
$("#panel h5.head").toggle(function(){
        $(this).next().slideUp();
        },function(){
        $(this).next().slideDown();
        })
$("#panel").click(function(){
        $(this).animate({left: "500px"}, 3000);
        })
$("#panel").click(function(){
        $(this).animate({left: "500px",height:"200px"}, 3000);
        })
$(function(){
        $("#panel").css("opacity", "0.5");//ÉèÖò»Í¸Ã÷¶È
        $("#panel").click(function(){
            $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
            .animate({top: "200px" , width :"200px"}, 3000 )
            .fadeOut("slow");
            });
        });
$(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
            $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
            .animate({top: "200px" , width :"200px"}, 3000 )
            .css("border","5px solid blue");
            });
        });
$(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
            $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
            .animate({top: "200px" , width :"200px"}, 3000 )
            .queue(function(next){
                $(this).css("border","5px solid blue");
                next(); //继续下一个动画
                })
            .slideUp("slow");

            });
        });
$(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
            $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
            .animate({top: "200px" , width :"200px"}, 3000 ,function(){
                $(this).css("border","5px solid blue");
                })

            });
        });
$(function(){
        //给id为mover的元素添加动画.
        function animateIt() {
        $("#mover").slideToggle("slow", animateIt);
        }
        function animateIt2() {
        $("#mover").fadeToggle("slow", animateIt2);
        }
        animateIt();


        $("button").click(function(){
            if(!$('#mover').is(":animated")){		//判断元素是否正处于动画状态
            //如果当前没有进行动画，则添加新动画 
            $('#mover').fadeToggle("slow", animateIt2);
            }else{
            $('#mover').stop();
            }
            });

        });
$(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
            $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
            .delay(1000)
            .animate({top: "200px" , width :"200px"}, 3000 )
            .delay(2000)
            .fadeOut("slow");
            });
        });
$(function(){
        $("#panel h5.head").click(function(){
            $(this).next().toggle();
            })
        })
$(function(){
        $("#panel h5.head").click(function(){
            $(this).next().fadeTo(600, 0.2);
            })
        })
$(function(){
        $("#panel h5.head").click(function(){
            $(this).next().fadeToggle();
            })
        })
$(function(){
        $("button:eq(0)").click(function () {
            $("div.content").hide().animate({ opacity : "1" }  );
            });

        $("button:eq(1)").click(function () {
            $("div.content").animate({height : "show" , width : "show" , opacity : "show" } , 600 );
            });

        $("button:eq(2)").click(function () {
            $("div.content").animate({height : "show" } , 600 );
            });

        $("button:eq(3)").click(function () {
            $("div.content").animate({ opacity : "show" } , 600 );
            });

        $("button:eq(4)").click(function () {
            $("div.content").animate({ opacity : "0.2" } , 600 );
            });
        })
$(function(){
        $("#panel").hover(function() {
            $(this).stop()
            .animate({height : "150" } , 200 )
            .animate({width : "300" } , 300 )
            },function() {
            $(this).stop()
            .animate({height : "22" } , 200 )
            .animate({width : "60" } , 300 )
            });
        });