2

友人のためにポートフォリオサイトを作成していますが、jQueryを使用して要素をアニメーション化するときに小さな問題が発生しました。

これが私の開発サイトhttp://dotlinesquare.phpfogapp.com/portfolio/gazeです。コントロールボタンは黒いヘッダーにあります。

問題は、イベントが発生しているときにボタンをクリックすると、位置番号が台無しになることです。

これが私の問題を理解するのに役立つことを願っているコードです

$('#next').click(function() {
    var currentMargin = $('#slider').attr('style');

    var number = currentMargin.match(/-?[0-9]+/);
    var position = number - 993;

    $('#slider').animate({ 
        marginLeft: position,
    }, 1000, 'easeInQuad', function() {
        console.log('done');
    });
});
$('#back').click(function() {
    var currentMargin = $('#slider').attr('style');

    var number = currentMargin.match(/-?[0-9]+/);
    var num = new Number(number)
    var position = num + 993;
    console.log(position);
    $('#slider').animate({ 
        marginLeft: position,
    }, 500, 'easeInQuad', function() {
        console.log('done');
    });
});
4

1 に答える 1

0

.data（）を使用して2クリック関数のステータスをバインドし、アクションを実行する前に最初に進行中であるかどうかを確認できます。このような：

  $('#next').click(function() {
    if ( $("#slider").data('inprogress') != true ) {

        $("#slider").data('inprogress',true);

        var currentMargin = $('#slider').attr('style');

        var number = currentMargin.match(/-?[0-9]+/);
        var position = number - 993;

        $('#slider').animate({ 
            marginLeft: position,
        }, 1000, 'easeInQuad', function() {
            console.log('done');
            $("#slider").data('inprogress',false);
        });

      }
  });
  $('#back').click(function() {
    if ( $("#slider").data('inprogress') != true ) {

        $("#slider").data('inprogress',true);


        var currentMargin = $('#slider').attr('style');

        var number = currentMargin.match(/-?[0-9]+/);
        var num = new Number(number)
        var position = num + 993;
        console.log(position);
        $('#slider').animate({ 
            marginLeft: position,
        }, 500, 'easeInQuad', function() {
            console.log('done');
            $("#slider").data('inprogress',false);
        });
    }

  });
于 2012-04-21T22:45:32.023 に答える