Question

以下脚本设置为由jQuery mouseenter事件触发，但现在需要在初始页面滚动时触发，并且每10秒重新运行一次，而不需要用户进行任何交互。令我沮丧的是，我无法创建具有这些规格的工作版本。

我怀疑我需要使用javascript间隔，但我没有把它弄好。

jQuery(document).ready(function($) {
function calcPoint(x1, y1, degrees, dist) {
    var radians = degrees * (Math.PI / 180);
    var x2 = Math.round(x1 + (Math.sin(radians) * dist));
    var y2 = Math.round(y1 + (Math.cos(radians) * dist));
    return [x2, y2];
}

var $cont  = $('#bubbles');
var $items = $cont.find('li');
var distance = 500; // distance for the items to travel
var duration = 750; // milliseconds
var delay    = 10000; // milliseconds

var explode = function() {
    $items.each(function(i) {
        var $item = $(this);

        // store the original position
        var pos = $item.position();
        if ($item.data('starting') == undefined) {
            $item.data('starting', pos);
        }
        //

        var angle = Math.floor(Math.random()*(360 + 1));
        var dest = calcPoint(pos.left, pos.top, angle, distance);
        $item.animate({
            left: dest[0],
            top:  dest[1],
            opacity: 0,
        }, duration);
    });
};

$cont.one('mouseenter', explode);

$cont.mouseleave(function() {
    $items.each(function() {
        var $item = $(this);
        var dest = $item.data('starting');
        $item.animate({
            left: dest.left,
            top: dest.top,
            opacity: 1
        }, duration);
    });

    setTimeout(function() {
        $cont.one('mouseenter', explode);
    }, delay);
});

Answer 1

setInterval(function(){
    $cont.trigger('mouseenter');    
}, 10000);

您可以每隔10秒触发一次mouseenter事件......

http://api.jquery.com/trigger

Answer 2

如果你想要它更短 - 插件“jquery-timing”允许以下语法：

$cont.repeat(10000).trigger('mouseenter');

定时事件与鼠标事件

2 个答案: