jquery学习02（效果）

隐藏，显示，切换

---

• 隐藏

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

语法：

$(selector).hide(speed,callback)

speed:隐藏的时间 ms
callback:执行后需要执行的函数名

• 显示

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

语法：

$(selector).show(speed,callback)

• 切换

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

语法参数同上：

• 淡入淡出

方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo() 允许渐变为给定的不透明度0-1之间
语法：

$(selector).fadeIn/fadeOut/fadeToggle(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

参数：
speed可以为ms,slow,fast
opacity 0-1之间代表透明度

• 上下滑动

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

• 动画

animate()
语法：

$(selector).animate({params},speed,callback)

参数：params：形成动画的css属性,可以有多个参数
如：

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

该方法也可以使用相对值，需要在值前加上+= -=，在上边例子中的‘0.5,150px’等
注意：animate()使用队列功能，多个animate()方法依次执行，实现动画连续功能 如下：

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});

• 停止动画

stop()
如下，先定义一个动画，然后定义stop()方法

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

• Callback

如果想在设计动画的函数执行结束后执行语句，使用callback函数

//没有使用callback函数--错误
 $("button").click(function(){
      $("p").hide(2000);
      alert("The paragraph is now hidden");
  });
//使用callback函数的
$("button").click(function(){
    $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
});

• 链接

允许相同的的元素上执行多条jquery命令

$(document).ready(function() {
    $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});