0

以下のリンクはjqueryスライダーのコピー用です。スライドをスムーズにしたいのですが、setinterval（たとえば200）の時間を短縮すると、スライダーはマウスアップイベントに即座に応答せず、マウスアップ後1〜2秒後にスライドが停止しますトリガーされます。また、jquery animation で stop を使用してみましたが、役に立ちませんでした。ここにリンクがあります。 http://jsfiddle.net/WwT54/ 今のところ、0.5 秒ごとにスライドが 10px シフトするので、滑らかに見せたいと思います。

$("#popUpInnerArrowLeft").mousedown(function (event) {

    movetoleft();
});

var into, into2;

function movetoleft() {
    function moveit() {
        $(".thumbsInnerContainer").animate({
            left: '-=10px'
        });
    }

    into = setInterval(function () {
        moveit();
    }, 500);

}

$(document).mouseup(function (event) {
    clearInterval(into);

});



//for the right arrow

$("#popUpInnerArrowRight").mousedown(function (event) {
    movetoright();
});

function movetoright() {

    function moveit2() {
        $(".thumbsInnerContainer").animate({
            left: '+=10px'
        });
    }

    into2 = setInterval(function () {
        moveit2();
    }, 500);

}

$(document).mouseup(function (event) {
    clearInterval(into2);
});
4

1 に答える 1

1

これをチェックしてください（それはあなたが望むものです）：

var into, into2, unit = '';

$("#popUpInnerArrowLeft").click(function (e) {  
    e.preventDefault();
    unit = false;
    movetoleft();
});

//for the right arrow
$("#popUpInnerArrowRight").click(function (e) {
    e.preventDefault();
    unit = true;
    movetoright();
});

function moveit() {    

    $(".thumbsInnerContainer").stop(true,true).animate({
        left: ((unit == true)? '+=':'-=') + '10px'
    },{easing:'linear'});
}

function movetoright() {        
    into = setInterval(function () {
        moveit();
    }, 300);
}

function movetoleft() {    
    into = setInterval(function () {
        moveit();
    }, 300);
}

$(document).mouseup(function (event) {
    clearInterval(into);    
});

ここで働くフィドル：http://jsfiddle.net/WwT54/2/

于 2013-08-18T10:52:44.313 に答える