平成30/ 2018-12-19 17:42
jQuery Effect 2018.04.09


$(this).toggle(450);
# 斜め上から表示される。450の部分はミリ秒。



$(this).slideToggle(700);
( 上から下へ表示される。)
( カクカクするときは <p> を <div> に置き換えたことで直ったことがある。)




# jQuery UI Effects を利用すれば以下を利用できる。
$(this).toggle('clip');
$(this).toggle('blind');
#
http://jqueryui.com/demos/
#

$(this).fadeIn();
# じんわり表示される。

$(this).show();
# ぱっと表示される。



#######################
#
#
エフェクトには、animate, fadeOut, hide がある。

-----------------------------------------------------------------------------
透明にしつつ折りたたむ
-
$('#line_ul_field').animate({height:'toggle',opacity:'toggle'},'slow');


-----------------------------------------------------------------------------
animate()後に実行させる(callback())
-
(function() 使うといい)
$('#field_pw_forgot_end').animate({height:'hide'},'fast', function(){
    $('#field_pw_forgot_err').animate({height:'hide'},'fast', function(){
        $('#field_pw_forgot_cfm').animate({height:'show'},'normal', function(){
            $('#field_pw_forgot_send').animate({height:'hide'},'normal', function(){
                $('#field_pw_forgot_input').animate({height:'show'},'normal');
            });
        });
    });
});







-----------------------------------------------------------------------------
$('#calendar').fadeIn();
$('#calendar').fadeOut();

-----------------------------------------------------------------------------
animate() の速度には、fast, normal, slow がある
----
<script type="text/javascript">
$(function(){
    $("#list_slide").click(function(){
        if(
        document.getElementById("list_slide").name=="off"
        ){
            //$("#list_field").animate({width:"hide"},"fast");
            //$("#entry_field").animate({width:"show"},"fast");
            //$("#list_field").fadeOut("normal");
            //$("#entry_field").fadeIn("normal");

            $("#list_field").hide("fast");
            $("#entry_field").show("fast");
            document.getElementById("list_slide").name="on";
        } else{
            //$("#list_field").animate({width:"show"},"fast");
            //$("#entry_field").animate({width:"hide"},"fast");
            //$("#list_field").fadeIn("normal");
            //$("#entry_field").fadeOut("normal");

            $("#list_field").show("fast");
            $("#entry_field").hide("fast");
            document.getElementById("list_slide").name="off";
        }

        // 以下とか。上から下に表示されるのでオススメ
        if($('#pw_save_unuse').prop('checked')){
            $('.field_pw_input').animate({height:'show'},'fast');
        } else{
            $('.field_pw_input').animate({height:'hide'},'fast');
        }


    });
});
</script>



--------------------------------------------------------------------------------------------------------------------------
Thanks.
-
animate(params, [duration], [easing], [callback])
http://semooh.jp/jquery/api/effects/animate/params,+%5Bduration%5D,+%5Beasing%5D,+%5Bcallback%5D/

animate の速度の指定方法
http://alphasis.info/2011/05/jquery-animate-duration/

hide(duration, [callback])
http://stacktrace.jp/jquery/api/effects/hide(duration).html

jQuery の animate の縦方向の出現や隠す動作
http://alphasis.info/2011/05/jquery-animate-height/