jQuery效果

• 2021 年 11 月 4 日
• 筆記
• 日常学习笔记

一、显示隐藏：

可以使用show（）和hide（）方法来显示隐藏；

$("#hide").click(function(){
    $("p").hide();
})
$("#show").click(function(){
    $("p").show();
});

可以使用toggle（）方法在show（）方法和hide（）方法中间切换；

$("#tog").click(function(){
   $("p").toggle();
});

语法：

$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback);
//其中speed 和callback都是可选参数，speed单位为毫秒（如设置成1000,2000等）；callback为回调函数；

二、淡入淡出：

方法：fadeIn();　　　　 fadeOut();　　　　fadeToggle();　　　　fadeTo()

$("#btn").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut(2000);
    $("#div3").fadeIn("slow")  ;
})

语法：

　$(selector).fadeIn(speed,callback);

　　　　$(selector).fadeOut(speed,callback);

　　　　$(selector).fadetoggle(speed,callback);

#("#btn").click(function(){
   $("#div4").fadeTo(slow,0.12);
});

　fadeTo可以使对象渐变成给定的透明度值（结余0到1之间）；

      语法：fadeTo(speed,opacity,callback);

三、滑动：

方法：slideDown()　　　　　　slideUp()　　　　slideToggle()

$("button").click(function(){
    $("#p1").slideUP("slow");      //向上滑动隐藏
    $("#p2").slideDown("slow");      //向下滑动隐藏
    $("#p3").toggle("slow");      //切换   
});

　语法：

　　$(selector).slideUp(speed,callback);

　　$(selector).slideDown(speed,callback);

　　$(selector).slideToggle(speed,callback);

五、stop（）方法；

　　stop（）方法用于停止、中断jQuery效果；

语法：

$(selector).stop(stopAll,goToEnd);

　　可选：stopAll，是否应该清除动画队列。默认false，仅会停止当前动画，后续动画依次执行；

　　可选：goToEnd，是否立即完成当前动画，默认false。

　　因此,默认的stop（）会清除元素上正在执行的动画；