🔹 jQuery - Effect

13863 ワード
jquery テキストリンク
🔹 jQuery - Effect
低視覚効果
低レベルとは、表示レベルまたは非表示レベルの視覚効果のみを提供することです.
表示、非表示の繰り返しまたはフェードイン効果、スライド効果の程度を低レベルの視覚効果と呼びます.
🔅 Basics Effects
要素.hide([duration], [complete])
要素を非表示にする方法.
不透明なプロパティ、heightプロパティを制御し、最終的にdisplayプロパティの値をnoneに変更します.
hideのパラメータは、「duration」持続時間とhide終了後に実行される「complete」関数を値として使用します.
要素.show([duration], [complete])
要素を表示する方法.
不透明なプロパティ、heightプロパティを制御し、最終的にdisplayプロパティの値をuserAgentに変更します.
showのパラメータは、「duration」持続時間とshow完了後に実行される「complete」関数を値として使用します.
要素.toggle([duration], [complete])
要素のdisplayプロパティの値がnoneの場合、showが実行され、そうでない場合hideが実行されます.
不透明なプロパティ、heightプロパティを制御し、最終的にdisplayプロパティの値をuserAgentまたはnoneに変更します.
「≪切替えパラメータ｜Switch Parameters｜Hss≫」では、切替え完了後に実行される「≪終了｜Finish｜Hss≫」関数とともに、期間が使用されます.
🔅 Fading Effects
要素.fadeOut([duration], [complete])
要素のdisplayプロパティの値がnoneでない場合に使用する方法.
不透明なプロパティを制御し、最終的にdisplayプロパティの値をnoneに変更します.
要素.fadeIn([duration], [complete])
要素のdisplayプロパティの値がnoneの場合に使用する方法.
不透明なプロパティを制御し、最終的にdisplayプロパティの値をuserAgentに変更します.
要素.fadeToggle([duration], [complete])
要素のdisplayプロパティの値がnoneでない場合はfadeOut、noneの場合はfadeInが実行されます.
🔅 sliding Effect
slideUp([duration], [callback])
要素のdisplayプロパティの値がnoneでない場合に使用する方法.
heightプロパティを制御し、最終的に表示プロパティの値をnoneに変更します.
slideDown([duration], [callback])
要素のdisplayプロパティの値がnoneの場合に使用する方法.
heightプロパティを制御し、最終的に表示プロパティの値をnoneに変更します.
slideToggle([duration], [callback])
要素のdisplayプロパティの値がnoneでない場合はslideUpを実行し、要素のdisplayプロパティの値がnoneの場合はslideDownを実行します.
<body>
<div class="effects">
        <div class="btns">
            <button class="btHide">숨김</button>
            <button class="btShow">보임</button>
            <button class="btToggle">토글</button>
        </div>
        <div class="canvas">
            <img src="img/pic04.jpg" alt="">
        </div>
</div>
</body>


<style>
$(function(){
    var $basics = $('.basics');
    //$basics.find('.btHide').click([handler]);
    $basics.find('.btHide').click(function(){
        //.hide(1000 = 1초)
        //.hide(1000, function(){} = 컴플리트함수)
        $basics.find('.canvas').hide(0, dpCheck);
    });

    $basics.find('.btShow').click(function(){
        $basics.find('.canvas').show(0, dpCheck);
    });

    $basics.find('.btToggle').click(function(){
        //지속시간 없이 (complete같은)콜백함수가 적용되면 지속시간의 기본 값은 400밀리초임
        //$basics.find('.canvas').toggle(dpCheck); = 지속시간 기본값
        $basics.find('.canvas').toggle(0, dpCheck);
    });

    function dpCheck(){
        var dp = $(this).css('display');
        console.log(dp);
    }

    var $fading = $('.fading');
    $fading.find('.btHide').click(function(){
        $fading.find('.canvas').fadeOut(1000, dpCheck)
    });
    $fading.find('.btShow').click(function(){
        $fading.find('.canvas').fadeIn(1000, dpCheck)
    });
    $fading.find('.btToggle').click(function(){
        $fading.find('.canvas').fadeToggle(1000, dpCheck)
    });

    var $sliding = $('.sliding');
    $sliding.find('.btHide').click(function(){
        $sliding.find('.canvas').slideUp(1000, dpCheck)
    });
    $sliding.find('.btShow').click(function(){
        $sliding.find('.canvas').slideDown(1000, dpCheck)
    });
    $sliding.find('.btToggle').click(function(){
        $sliding.find('.canvas').slideToggle(1000, dpCheck)
    });
});
</style>
2分でアマゾンSSMエージェントを理解してください
Pythonでsock商関数を完了します.