JQuery的事件与动画

阅读更多

toggle()方法的用法
toggle()方法用于模拟鼠标连续单击事件。运行为：第一次单击执行第一个函数，第二次单击时执行第二个函数，可以重复调用，

编写网页或新闻时，如有标题需要对其进行解释时可以使用toggle()方法。代码如下

 

$(function(){

          $(标题).toggle(function(){

              $(this).next().show();

          }.(function){

             $(this).next().hide();

          })
});

 
代码中的标题就是我们要处理的一个事件，我们可以根据自己的需求来写

 

toggle()还有另外一个作用，就是它可以切换元素的状态。如果元素是可见的，单击后会变成隐藏的。如果元素是隐藏的，单击后会变成可见的，所以还有另外的一个方法切换元素状态。

 

 

$(function(){

          $(标题).toggle(function(){

              $(this).next().toggle();

          }.(function){

             $(this).next().toggle();

          })
});

 上面的方法也可以实现切换元素状态的目的，同样标题也是我们自己选择我们的需求来填写的。

 

能达到toggle()方法相似效果的还有hover，hover是模仿鼠标悬停，鼠标悬停时执行第一个函数，移开时执行

第二个函数

 

(function(){

          $(标题).hover(function(){

              $(this).next().show();

          }.(function){

             $(this).next().hide();

          })
});

 

上述的方法多用于超链接，以展示超链接的内容。

 

引申：上述的方法也可以用于改变background,highlight,px等其他内容，不局限于显示和隐藏。

 

对于隐藏和显示还有几种方法，比如改变不透明度来实现用fadeIn()和fadeOut()来实现，还可以用由上向下延伸来显示slieddown()和由下向上来隐藏sliedup()来实现。

 

下面举一个例子

 

$(function(){

          $(标题).toggle(function(){

              $(this).next().slideUp();

          }.(function){

             $(this).next().slideDown();

          })
});

 

这样就显示出了最简单的动画效果。

 

 

解释：关键字this引用的是带有相应行为的DOM元素，为了使DOM元素能够使用JQuery中的方法，使用$(this)将其转化为JQuery对象。