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对象。

猜你喜欢

转载自1397548794.iteye.com/blog/2411627
今日推荐