jquery里简单定时器

jQuery 提供了一个简单定时器方法,可以用来控制元素的动态效果。方法如下:

setInterval(function(){// 在这里编写你要执行的代码}, 1000);

上面的代码中,第一个参数是一个函数,可以在该函数中编写你想要执行的代码。第二个参数是时间间隔,单位是毫秒。

使用定时器方法可以制作一些简单而有趣的动画效果,例如:鼠标移入图片时图片会缩小,鼠标移出图片时图片会放大。代码如下:

$("img").hover(function(){$(this).animate({width: "50%"}, 300);}, function(){$(this).animate({width: "100%"}, 300);});

上面的代码中,用到了 jQuery 的动画方法 animate(),在鼠标移入和移出时分别缩小和放大图片。

定时器方法还可以用来轮播图片、滚动新闻等常见功能。代码如下:

var index = 0;var len = $("img").length;setInterval(function(){$("img").eq(index).fadeOut(500);index = (index + 1) % len;$("img").eq(index).fadeIn(500);}, 3000);

上面的代码中,定义了一个变量 index 用来记录当前显示的图片序号,len 表示图片总数。定时器方法每 3 秒执行一次,将当前图片淡出,然后将 index 增加 1,再将下一张图片淡入。

简单定时器是 jQuery 中常见的一种方法,可以应用于众多场景,对页面优化非常有帮助。

jquery里简单定时器