Muszę animować sprite'a po najechaniu kursorem i to wszystko! Próbowałem kilku wtyczek, ale postanowiłem napisać własną. Oto on:

 (function($) {
    function animate(opts, t) {
        if (opts.bgpos === opts.width * opts.frames) {
            t.css('background-position-x', '0px');
        } else {
            opts.bgpos = opts.bgpos + opts.width;
            t.css('background-position-x', opts.bgpos + 'px');
        }
    }
    $.fn.spin = function(options) {
        var t = $(this);
        var opts = $.extend({}, $.fn.spin.defaults, options);
        var frames = t.data('frames');
        var bgpos = parseInt(t.css('background-position-x'),10);
        opts = $.extend({
            'frames': frames,
            'bgpos': bgpos
        }, opts);
        setInterval(animate(opts, t), 1000 / opts.fps);
    };
    $.fn.spin.defaults = {
        fps: 7,
        width: 236
    };
})(jQuery);

[Nazywa się to wirowaniem, ponieważ animacja duszka przedstawia wirowanie]

Dzwonię do tego:

$('article.post').on({
    mouseenter: function() {
        var t = $(this);
        t.children('div.filmstrip').spin();
    }
});

Jednak animacja przesuwa się tylko o jedną klatkę na najechanie kursorem. Z tego, co znalazłem, wynika to z tego, że używam wywołania funkcji, a nie odwołania w moim setInterval. Mogę zrobić pętlę setInterval, jeśli usunę (), jednak moja funkcja animacji nie powiedzie się bez jej zmiennych.

Jak mogę umieścić moje $(this) i opcje w mojej funkcji animowania za pomocą setInterval? Lub?

0
iiz 24 wrzesień 2012, 16:55

2 odpowiedzi

Najlepsza odpowiedź

window.setInterval() wymaga parametru typu function, ale podajesz wartość zwracaną animate, czyli undefined.

Kiedy piszesz

setInterval(animate(opts, t), 1000 / opts.fps);

Mówisz silnikowi JS, aby natychmiast wykonał animate(opts, t), a następnie wywołujesz setInterval na zwróconej wartości, która w tym przypadku jest undefined, ponieważ twoja funkcja niczego jawnie nie zwraca. A więc stało się tak:

var animated = animate(opts, t); //animated == undefined
setInterval(animated, 1000/opts.fps);

W ten sposób nie planujesz niczego. Możesz użyć literału funkcji

setInterval(function() {animate(opts, t);}, 1000 / opts.fps);

Tak, że zamknięcie

function() {
  animate(opts, t);
}

Jest przekazywany do setInterval i jest zaplanowany do późniejszego wykonania.

0
Raffaele 24 wrzesień 2012, 17:04

Przekazujesz wynik swojej metody animate do setInterval - zgaduję, że chcesz wywołać tę funkcję za każdym razem.

Po prostu zapakuj wywołanie funkcji w funkcję anonimową:

setInterval(function(){ animate(opts, t) }, 1000 / opts.fps);
1
Jamiec 24 wrzesień 2012, 16:59