jQuery中的show()和hide()、fadeIn()和fadeOut()、slideDown()和slideUp用法

一、show和hide(隐藏显示)

  1、show:最终状态是 display:block;

        hide:最终状态是 display:none;

  2、语法:show(毫秒数,回调函数)

  3、注意:

      ①当jq对象没有处于最终状态时,当动画执行完毕后,才会触发,回调函数;

      ②当jq对象处于最终状态时,立马执行,回调函数 ;

      ③如果当前的jq对象处于动画的最终状态 则 不会重复执行

eg:

     
二、fadeIn和fadeOut(淡入淡出)

  1、fadeIn:最终状态是 display:block;

        fadeOut:最终状态是 display:none;

  2、语法:

      jq对象.fadeIn(参数1,参数2);

      jq对象.fadeOut(参数1,参数2);

  3、注意:

     (1)参数可选 可写可不写

     (2)参数1 动画执行的毫秒数 ;参数2 动画执行完毕后 触发的回调函数

     (3)当jq对象处于当前动画的终点 则 回调函数立马触发

eg:

       
三、slideDown和slideUp(隐藏显示)

  1、slideDown:最终状态是 display:block;

        slideUp:最终状态是 display:none;

  2、语法:

      slideDown(参数1,参数2)

      slideUp(参数1,参数2)

  3、注意:

   (1)参数1和参数2都是可选的,可有可无的;

   (2)参数1  是毫秒数

   (3)参数2 是回调函数

         ①当触发动画的jq对象没有处于最终状态 则 动画执行完毕后 才会去执行回调函数

         ②当触发动画的jq对象,处于最终状态,则立即执行回调函数。

eg:

     

posted @ 2020-06-30 09:48  拾柒moonpie  阅读(1200)  评论(0编辑  收藏  举报