JAvascriptのjqueryアニメーション
5349 ワード
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 )
});
});