jQuery效果——隐藏和显示

Original 2016-11-12 09:26:49 330
abstract:(1) hide()和show()如:$("#myButton").click(function(){   $(this).hide(); //执行该句,将会隐藏当前元素   $(this).show(); //执行此句,将会显示当前元素   $(this).hide(1000); //执行此句,将会有一个渐变过程1000毫秒   $(this).

(1) hide()和show()

如:

$("#myButton").click(function(){
  $(this).hide(); //执行该句,将会隐藏当前元素
  $(this).show(); //执行此句,将会显示当前元素
  $(this).hide(1000); //执行此句,将会有一个渐变过程1000毫秒
  $(this).show(1000); //同理,显示过程有1000毫秒的渐变效果
  $(this).hide(1000,function(){
    alert("延迟1000毫秒之后,被隐藏了!");
  }); //执行此句,将在渐变1000毫秒效果隐藏之后,弹出alert显示提示内容
  // $(selector).hide(speed,callback);是基础语法
});

(2) toggle()函数

该函数将会颠倒元素显示状态——hide的变show, show的变hide;

如:

$("#myButton").click(function(){
  $("#anotherButton").toggle();
}

同样,toggle也能像hide和show函数一样,带有speed和callback参数扩展:

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

如:

$("#anotherButton").toggle(500,function(){
  alert("toggle渐变执行时间500毫秒,之后弹出这个提示框!");
});


Release Notes

Popular Entries