<title>jQuery</title> <style type="text/css"><!-- #spanel,#showHide,#fadeout { width:200px; height:100px; background-color:Aqua; position:relative; cursor:pointer; font-size:12px; } --></style> <div id="showHide"> </div> <p>表示を上に移動して確認してください</p> <div id="spanel"> <h5> </h5> </div>こんにちは<p> </p> <div id="fadeout"></div> フェードアウト効果 フェードアウト効果 フェードアウト効果 フェードアウト効果 フェードアウト効果 フェードアウト効果 フェードアウト効果 フェードアウト効果 [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]<!-- $(function(){ //用toggle,hide(),show()实现显示与隐藏 $("#showHide").toggle(function(){ $(this).hide(600) },function() { $(this).show(600); } ); //使用fadeout,fadeIn改变透明度 $("#fadeout").toggle(function(){ $(this).fadeOut(); },function() { $(this).fadeIn(); } ); //使用animate实现简单的动画效果 $("#spanel").bind("click",function(){ $(this).animate({left:"300px",height:"100px"},3000); }); }); // -->
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
