jquery setinterval 不起作用
我有这个:
$("#nav-reflection li").append("<span></span>");
// Animate buttons, move reflection and fade
$("#nav-reflection a").hover(function() {
$(this).stop().animate({ marginTop: "-10px" }, 200);
$(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 300);
$(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
});
/* =Shadow Nav
-------------------------------------------------------------------------- */
// Append shadow image to each LI
$("#nav-shadow li").append('<img class="shadow" src="http://admin.focuswebmedia.com/wp-content/themes/fwm/images/icons-shadow.jpg" width="79" height="19" alt="" />');
//$("#slider_right").append('<div id="porfolio_contact_text">Our Porfolio Contact Us</div>');
// Animate buttons, shrink and fade shadow
$("#nav-shadow li").hover(function() {
var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
},function(){
var e = this;
$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
$(e).find("a").animate({ marginTop: "0px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0", opacity: 1 }, 250);
});
悬停时效果很好。但是我怎样才能让它每 5 秒左右自动播放一次呢?我尝试过:
window.setInterval(play_ani, 5000);
function play_ani() {
$j("#nav-reflection a").mouseover();
}
但什么也没发生...... 有什么想法吗?
I have this:
$("#nav-reflection li").append("<span></span>");
// Animate buttons, move reflection and fade
$("#nav-reflection a").hover(function() {
$(this).stop().animate({ marginTop: "-10px" }, 200);
$(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 300);
$(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
});
/* =Shadow Nav
-------------------------------------------------------------------------- */
// Append shadow image to each LI
$("#nav-shadow li").append('<img class="shadow" src="http://admin.focuswebmedia.com/wp-content/themes/fwm/images/icons-shadow.jpg" width="79" height="19" alt="" />');
//$("#slider_right").append('<div id="porfolio_contact_text">Our Porfolio Contact Us</div>');
// Animate buttons, shrink and fade shadow
$("#nav-shadow li").hover(function() {
var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
},function(){
var e = this;
$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
$(e).find("a").animate({ marginTop: "0px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0", opacity: 1 }, 250);
});
works great on hover. But how do I get this to play automatically every 5 or so seconds? I tried this:
window.setInterval(play_ani, 5000);
function play_ani() {
$j("#nav-reflection a").mouseover();
}
But nothing happens...
Any ideas?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以只触发悬停事件:
我认为您的代码什么也不做,因为您没有触发效果。
更新 - 您必须触发鼠标悬停并使用 $ 而不是 $j - 示例小提琴: http://jsfiddle.net/ nicolapeluchetti/qdwZN/3/
You could just trigger the hover event:
I think your code does nothing because you are not triggering the effect.
UPDATE - you must trigger mouseover and use $ not $j - example fiddle: http://jsfiddle.net/nicolapeluchetti/qdwZN/3/
您应该触发
mmouseenter
事件。但是,最好将该代码移动到一个单独的函数中并从两个地方调用它:
You should trigger the
mmouseenter
event.However, it would be better to move that code into a separate function and call it from both places: