Jquery从入门到放弃（二）

 

jquery效果

前边讲到jquery能实现隐藏、显示、切换，滑动，淡入淡出，以及动画，原来平时呆板的页面也可以由开发者轻轻松松地给它注入活力。

 

1.    隐藏和显示   hide()和show()以及toggle()

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

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

详细的语法再这里：

$(selector).hide(speed,callback);  其中speed是速度，单位是毫秒，也可以用slow和fast控制，callback是回调函数

toggle(): 用来切换     hide() 和 show() 方法

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>

同理 toggle()函数的参数也是  

toggle(speed,callback);

2.淡入和淡出

淡入fadeIn(speed,callback)淡出 fadeOut(speed,callback)  淡入淡出交替fadezToggle(speed,clallback)

重点看fadeTo函数：

$(selector).fadeTo(speed,opacity,callback);  //opactiy 不透明度，[0,1],从清晰到模糊

3.滑动效果

上滑 slideUp(speed,callback)下滑slideDown(speed,callback)   交替滑动slideToggle(speed,callback)

4动画

1. animate（）用于创建自定义动画，可以操作元素

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

所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

当存在多个动画请求的时候，可以使用队列功能

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

2.stop()方法   

stop(stopAll,goToEnd);  
stopall是布尔变量，默认false，意为清除动画队列    goToEnd 参数规定是否立即完成当前动画。默认是 false。

3方法链             将相同元素上运行的多条的jquery命令连接在一起

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

转载于:https://my.oschina.net/u/1031097/blog/829326