jQuery效果

jQuery效果

方法	描述
animate()	对被选元素应用"自定义"的动画
clearQueue()	对被选元素移除所有排队函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	移除下一个排队函数，然后执行函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
fadeToggle()	在 fadeIn() 和 fadeOut() 方法之间进行切换
finish()	对被选元素停止、移除并完成所有排队动画
hide()	隐藏被选元素
queue()	显示被选元素的排队函数
show()	显示被选元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	slideUp() 和 slideDown() 方法之间的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止被选元素上当前正在运行的动画
toggle()	hide() 和 show() 方法之间的切换

（一）隐藏和显示

hide（）：隐藏

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

show（）:显示

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

show（）和hide（）括号中可选的参数：规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可添加函数：隐藏或显示完成后所执行的函数名称。

$(function(){
  $(".btn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("div已消失");
    });
  });
});

toggle()：隐藏和切换自动切换

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

（二）淡入/淡出

fadeIn()：淡入

$(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});

fadeOut():淡出

$(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});

fadeToggle（）：淡入淡出切换

$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});

fadeTo（）：渐变为给定的不透明度

$(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

注意：fadeTo() 没有默认参数，必须加上 slow/fast/Time

（三）滑动

slideDown()：向下滑动

$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});

slideUp()：向上滑动

$(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});

slideToggle()：切换向上向下滑动

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

（四）动画-animate（）

操作单个属性

$(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});

操作多个属性

$(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      '150px'
    });
  });
});

相对于当前值变化

$(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      '+=150px'
    });
  });
});

使用队列：先执行完一个样式，接着再执行一个样式

$(function(){
  $("button").click(function(){
   $("div").animate({height:'300px',opacity:'0.4'},"slow")
.animate({'300px',opacity:'0.8'},"slow")
.animate({height:'100px',opacity:'0.4'},"slow")
.animate({'100px',opacity:'0.8'},"slow")
  });
});

delay（）--延迟动画

执行完一个动画后，延迟多久再执行下一个

 $("#div1").click(function(){
                $(this)
                    .animate({ 200}, 2000)
                    .delay(4000)
                    .animate({height: 200}, 2000)
                    .animate({opacity: 0.5}, 2000);
            });

stop（）--停止动画

在stop（）中设置参数为true，是停止所有的动画

$("#div1").stop();  //停止当前正在运行的动画，不影响后续动画
$("#div1").stop(true); //停止所有动画
$("#div1").stop(true, true); //停止所有动画，当前正在进行的动画，直接到达目的值
$("#div1").finish(); //停止所有动画，将所有动画都到达目的值

$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

在上述效果中有没有回调函数的区别

如以下的实例中，有回调函数时，会再隐藏效果完成后再弹出警告框

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

如以下的实例中，没有回调函数时，警告框会在隐藏效果完成前弹出

$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});