0

ユーザーがカーソルを画像の上に移動するとプレビューが表示される機能を実行しようとしています。そのため、イベントを発生させた画像の src を取得し、それを別の画像のパスに変更しています。

$('#image').hover(function(){
    var src = "";
    var elem = $(this);
    for (var i=2; i<16; i++) {
        src = elem.attr('src').split('.');
        src[3] = i; 
        src = src.toString();
    src = src.split(',').join('.');
    elem.attr('src', src);
    }
});

問題はここにあります。以下のようなことをしようとすると、すべてのプレビューに遅延を入れても、思い通りに動作しません。

$('#image').hover(function(){
    var src = "";
    var elem = $(this);
    for (var i=2; i<16; i++) {
        src = elem.attr('src').split('.');
        src[3] = i; 
        src = src.toString();
        src = src.split(',').join('.');
        setTimeout(function() {
            elem.attr('src', src);
        }, 800);
    }
});

どうすれば解決できますか？私は+2時間その問題に取り組んでいます

4

2 に答える 2

1

問題は、for ループ内で setTimeout を使用できないことです。その代わりに、setInterval を使用します。

 $('#image').hover(function () {
    var src = "";
    var elem = $(this);
    var i = 2;
    var interval = setInterval(function () {
        if (i < 16) {
            src = elem.attr('src').split('.');
            src[3] = i;
            src = src.toString();
            src = src.split(',').join('.');

            elem.attr('src', src);
            i++;
        } else {
            i = 2;
            clearInterval(interval);
        }
    }, 800);
});
于 2013-04-20T05:08:05.807 に答える
0 
$('#image').hover(function(){
    var src = "";
    var elem = $(this);
    for (var i=2; i<16; i++) {
        src = elem.attr('src').split('.');
        src[3] = i; 
        src = src.toString();
        src = src.split(',').join('.');

$(elem).delay(800).animate({zoom:1},0,function(){$(this).src(src);});
    }
});
于 2013-04-20T05:03:02.743 に答える