文斌的博客

学无止境
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery学习11.3.4

Posted on 2011-03-04 11:06  文斌1988  阅读(258)  评论(0)  编辑  收藏  举报
简单的动画效果可以通过jQuery的show()和hide()来实现。
  1. $(document).ready(function(){
  2. $("a").toggle(function(){
  3. $(".stuff").hide('slow');
  4. },function(){
  5. $(".stuff").show('fast');
  6. });
  7. })

toggle()方法的效果就是切换元素的可见状态；即如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

例子：

$(function(){
 $("#content").toggle();
})

<p id="content" style="display:none">这里原来是隐藏看不到的</p>

当有点击事件时，另一区域可见状态切换可以这么写：

$(document).ready(function(){
  $("#test").click(
  function(){
   $("#content").toggle();
  }
  );
 });

<p id="test"><input type="button" value="点击这里" /></p>
<p id="content" style="display:none">当点击上面的“点击这里“字样，这里的内容将隐藏与显示之间切换</p>

下面说一下toggle(fn,fn)方法的使用，效果是：每次点击后依次调用函数；如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能，不需要另外.click(fn)了，我一开始操作此函数时就犯了错。

例子：

$(document).ready(function(){
    $("#test").toggle(function(){
     $("#content").hide('slow');
    },function(){
     $("#content").show('fast');
   });
});

<p id="test"><input type="button" value="点击这里" /></p>
<p id="content" style="display:none">当点击上面的“点击这里“字样，这里的内容将隐藏与显示之间切换</p>

 

利用animate()，你可以创建任何的动画，例如淡入淡出的滑动。

  1. $(document).ready(function(){
  2. $("a").toggle(function(){
  3. $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  4. },function(){
  5. $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
  6. });
  7. });

animate(params,speed,easing,callback)

用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

返回值:jQuery参数:

  • params (Hash): 一组包含作为动画属性和终值的样式属性和及其值的集合
  • speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)  slow缓慢的
  • easing (String): (可选) 要使用的擦除效果的名称(需要插件支持).
  • callback (Function): (可选) 在动画完成时执行的函数
 

示例:

$("p").animate({ height: 'toggle', opacity: 'toggle' },   "slow");

示例:

$("p").animate({ left: 50, opacity: 'show' },   500);

示例:

一个使用“擦除”函数提供不同动画样式的例子。只有在一个插件可以提供这个“擦除”函数（jQuery库中默认只提供“linear”函数）的情况下才有效。 

$("p").animate({ opacity: 'show' }, "slow",   "easein");

 

ready(fn)

代码：

 

Js代码 复制代码
  1. $(document).ready(function(){   
  2.   // Your code here...   
  3. })；  

 

 

作用：它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

 

bind(type,[data],fn)

代码：

 

Js代码 复制代码
  1. $("p").bind("click", function(){   
  2.   alert( $(this).text() );   
  3. });   

 

 

作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到事件监听的作用。

 

toggle(fn,fn)

代码：

 

Js代码 复制代码
  1. $("td").toggle(   
  2.   function () {   
  3.     $(this).addClass("selected");   
  4.   },   
  5.   function () {   
  6.     $(this).removeClass("selected");   
  7.   }   
  8. );  

 

 

作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。(像click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。)

 

jQuery外观效果

 

addClass(class)和removeClass(class)

代码：

 

Js代码 复制代码
  1. $(".stripe tr").mouseover(function(){     
  2.                $(this).addClass("over");}).mouseout(function(){    
  3.                $(this).removeClass("over");})   
  4. });  

 

 也可以写成：

 

Js代码 复制代码
  1. $(".stripe tr").mouseover(function() { $(this).addClass("over") });   
  2. $(".stripe tr").mouseout(function() { $(this).removeClass("over") });  

 

 

作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码

 

css(name,value)

代码： 

$("p").css("color","red");

作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

 

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代码：

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

 

作用：jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数：show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。