当我移动鼠标或从键盘按键时如何停止Jquery效果任何建议都将受到赞赏。
function dream(){
//calculating random color of dream
var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
//calculating random X position
var x = Math.floor(Math.random() * $(window).width());
//calculating random Y position
var y = Math.floor(Math.random() * $(window).height());
//creating the dream and hide
drawingpix = $('<span>').attr({ class: 'drawingpix' }).hide();
//appending it to body
$(document.body).append(drawingpix);
//styling dream.. filling colors.. positioning.. showing.. growing..fading
drawingpix.css({
'background-color':color,
'border-radius':'100px',
'-moz-border-radius': '100px',
'-webkit-border-radius': '100px',
top: y-14, //offsets
left: x-14 //offsets
}).show().animate({
height:'500px',
width:'500px',
'border-radius':'500px',
'-moz-border-radius': '500px',
'-webkit-border-radius': '500px',
opacity: 0.1,
top: y-250, //offsets
left: x-250
}, 3000).fadeOut(2000);
//Every dream's end starts a new dream
window.setTimeout('dream()',200);
}
$(document).ready(function() {
//calling the first dream
dream();
});
答案 0 :(得分:3)
stop表示它会停止匹配元素上的动画传播。
如果你想停止动画,那就找到它并按照这样的方式调用stop()
:
$("span").on("keypress", function() {
$(this).stop(true, true);
});
为鼠标添加第二个事件捕获,您应该看到动画停止。
您必须使用选择器来准确捕获正在设置动画的对象。我不确定是否会在span
上捕获按键,或者您是否需要在特定情况下更通用/更广泛。
要停止生成dream
的新实例,您需要致电clearTimeout()
。 Here is a great explanation了解如何使用。
更新:Here is a jsfiddle在关注mouseover
时会显示其中一些提示。将鼠标悬停在动态创建的圆上(这就是您必须使用on
捕获事件的原因)将停止当前动画并清除创建的setTimeout。您应该能够采用这些想法并操纵它们来生成您正在寻找的行为。