上下左右を実現するjqueryメソッドsliding_jquery

この記事の例では、jquery が上下左右のスライドを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>



<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").unbind().click(function(){
$("#first").hide();

$("#sec").css("left","-200px").animate({"left":"0px"},500).show();
});

$("#btn2").unbind().click(function(){
$("#sec").hide();

$("#first").css("left","200px").animate({"left":"0px"},500).show();
});

$("#btn3").unbind().click(function(){
$("#first").hide();
$("#sec").css("top","200px").animate({"top":"0px"},500).show();
});

$("#btn4").unbind().click(function(){
$("#sec").hide();
$("#first").css("top","-200px").animate({"top":"0px"},500).show();
});
});

最初のページ

                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                                                                   

次の点に特別な注意を払う必要があります。position:absolute; をコードに追加する必要があります。追加しない場合、効果は表示されません。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。