jqueryの非表示、イベントとプロンプトのコールバックの表示、フェードインとフェードアウトのフェードトグル、スライドインとスライドアウトのスライドトグル、アニメーションのアニメーションの停止アニメーションの停止-jsチュートリアル-php.cn

jqueryの非表示、イベントとプロンプトのコールバックの表示、フェードインとフェードアウトのフェードトグル、スライドインとスライドアウトのスライドトグル、アニメーションのアニメーションの停止アニメーションの停止

巴扎黑

リリース： 2017-06-30 11:15:34

オリジナル

1679 人が閲覧しました

1. jquery 非表示と表示イベント

$("p").hide();      //隐藏事件
$("p").hide(1000);  //1秒内缓慢隐藏
$("p").show();      //显示事件
$("p").toggle();    //在隐藏和显示中切换

ログイン後にコピー

非表示にした後にプロンプトコールバックを表示

$("p").hide(function(){    alert("提示消息已经隐藏");    });
$("p").hide(1000,function(){    alert("1s内缓慢隐藏并提示消失已经隐藏");    });

ログイン後にコピー

2. フェードインおよびフェードアウト

$("#p1").fadeIn();             //淡入$("#p2").fadeIn("slow");   //缓慢淡入$("#p3").fadeIn(3000);    //延迟3秒淡入
$("#p").fadeOut()            //淡出
$("#p").fadeToggle()        //淡入淡出
$("#p3").fadeTo("slow",0.7);     //设置淡化程度  0完全消失，1不淡化

ログイン後にコピー

例は次のとおりです:

$(".panel").slideDown();         //向下滑动显示class=panel的p
$(".panel").slideUp("slow");    //向上收起class=panel的p
$(".panel").slideToggle("slow");    //点击显示，再点击收起

ログイン後にコピー

4. animate

まず、説明です。css 属性を直接変更する代わりに、animate を呼び出す必要がある理由について話しましょう。animate を使用すると、p のスタイルをゆっくりと変更でき、アニメーション効果がより美しくなります。一方、css を直接変更すると、直接完了します。ロードしてフラッシュしても効果は良くありません。

デフォルトでは、すべての HTML 要素の位置は静的であり、移動できません。位置を操作したい場合は、最初に要素の CSS

position

プロパティを相対、固定、または絶対に設定することを忘れないでください。例:

<head>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");    //点击向下滑动显示p，再次点击收起
  });
});
</script>
<style type="text/css"> 
p.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.panel
{
height:120px;
display:none;   /*设置隐藏的p*/
}
</style>
</head>
<body>
<p class="panel">
<p>显示隐藏的p</p>
<p>请大家关注我的博客</p>
</p>
<p class="flip">点击显示，再次点击隐藏</p>
</body>

ログイン後にコピー

ステップバイステップアニメーション

<head>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left:&#39;250px&#39;,
      opacity:&#39;0.5&#39;,        //淡化
      height:&#39;150px&#39;,
      width:&#39;150px&#39;
      //height:&#39;+=150px&#39;,       //可使用相对值
      //width:&#39;+=150px&#39;
      //height:&#39;toggle&#39;,           //使用预定值，从消失到显示
      //width:&#39;toggle&#39;
    });
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p style="background:#98bf21;height:100px;width:100px;position:absolute;"></p>
</body>

ログイン後にコピー

5. アニメーションを停止します

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var p=$("p");           //
定义变量
p到指定位置
    p.animate({height:&#39;300px&#39;,opacity:&#39;0.4&#39;},"slow");
    p.animate({width:&#39;300px&#39;,opacity:&#39;0.8&#39;},"slow");
    p.animate({height:&#39;100px&#39;,opacity:&#39;0.4&#39;},"slow");
    p.animate({width:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow");
  });
});
</script>

ログイン後にコピー

以上がjqueryの非表示、イベントとプロンプトのコールバックの表示、フェードインとフェードアウトのフェードトグル、スライドインとスライドアウトのスライドトグル、アニメーションのアニメーションの停止アニメーションの停止の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。