ibcadmin 发表于 2017-6-21 09:45:46

Jquery中动画讲解

1.左上角的缩放效果


hide(])

  概述:隐藏显示的元素

  参数:speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示 动画时长的毫秒数值(如:1000)

    fn:在动画完成时执行的函数,每个元素执行一次。

// $(":button").click(function(){
//        $("div").hide(2000,function(){
//        alert("div隐藏了");
//        });
//        })

show(])

  概述:显示隐藏的匹配元素。

// $(":button").click(function(){
//        $("div").show(2000,function(){
//        alert("div显示了");
//        });
//        })

toggle(,)

  概述:如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

// //toggle(,) 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的
// $(":button").click(function(){
//        $("div").toggle(2000);
//        })





2.上下的缩放效果


slideUp(speed, )

  概述:通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

  参数: speed 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) callback (可选) 在动画完成时执行的函数

//slideUp(speed, ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数
// $(":button").click(function(){
//        $("div").slideUp(2000);
//        })

slideDown(speed, )

  概述:通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

// //slideDown(speed, ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数
// $(":button").click(function(){
//        $("div").slideDown(2000);
//        })

slideToggle(,)
  概述:通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

//slideToggle(,) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数
// $(":button").click(function(){
//        $("div").slideToggle(2000);
//        })





3.淡入淡出效果(不透明度的变化)


fadeOut(speed, )

  概述:通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

// $(":button").click(function(){
//        $("div").fadeOut(2000);
//        })

fadeIn(speed, )

  概述:通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

$(":button").click(function(){
//        $("div").fadeIn(2000);
//        })

fadeToggle(])

  概述:通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

$(":button").click(function(){
//        $("div").fadeToggle(2000);
//        })

fadeTo(speed,opacity,)

  概述:把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

// $(":button").click(function(){
//        $("div").fadeTo(2000,0.5);
//        })






4.自定义动画


animate(params,,)

  概述:用于创建自定义动画的函数。

//          $("div").animate({"left":"1000px"},2000);



stop(, )

  概述:停止所有在指定元素上正在运行的动画。

  参数: clearQueue (可选)如果设置成true,则清空队列。可以立即结束动画。

               gotoEnd (可选)让当前正在执行的动画立即完成。

// $(document).click(function(){
//        $("div").stop()
//        })



delay(duration)

  概述:设置一个延时来推迟执行队列中之后的项目。

  参数 duration 延时时间,单位:毫秒

//          $("div").delay(2000).animate({"left":"1000px"},2000);

桂林一枝花 发表于 2017-6-22 10:27:31

现在前端都不玩jQuery。。前端现在玩jq都感觉掉档次。。jq是留给后台玩的了:lol:lol
页: [1]
查看完整版本: Jquery中动画讲解