1

次のスクリプトは、jQuerymouseenterイベントによってトリガーされるようにセットアップされましたが、最初のページ スクロール時にトリガーされ、ユーザーの操作なしで 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);
});
4

2 に答える 2

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

mouseenter10秒ごとにイベントをトリガーするだけです...

http://api.jquery.com/trigger

于 2012-08-20T22:10:56.880 に答える
0

さらに短くしたい場合は、プラグイン「jquery-timing」で次の構文を使用できます。

$cont.repeat(10000).trigger('mouseenter');
于 2012-08-27T19:52:23.357 に答える