0

私はアニメーションのような画像スライダーを持っていますが、違いは1つのスライドにいくつかの要素があり、私の場合はシーンの左側または右側から4枚の画像が表示されることです。

問題は、アニメーションが100％終了するまでアニメーション機能を無効にしてから、再度有効にするリンクを作成する方法です。

これが私のコードです...

$(document).ready(function() {

//
$('.package_box_menu li').children().click(function(){

    $(this).showProducts($(this).attr("id"))

});

jQuery.fn.showProducts = function (clickedSeason) {

    var nextToShowSide = $('.'+[clickedSeason]+'_img1').attr("rel");            
    var active = $('img[ rel |= active]').attr('season');

    if (nextToShowSide == 'right') {var whereTo = '-1000px'; var currentToHideSide ="left" };
    if (nextToShowSide == 'left') {var whereTo = '3000px'; var currentToHideSide ="right" };    

    show();
    hide(active, whereTo, currentToHideSide);

    function show(){

        var allToShow = ($('img[ season |= '+[clickedSeason]+']').get()).length;            
        for (var i = 1; i<= allToShow ; i++){
            var delay =  $('.'+[clickedSeason]+'_img'+[i]).attr('delay');
            var position = $('.'+[clickedSeason]+'_img'+[i]).attr('left');
            $('.'+[clickedSeason]+'_img'+[i]).stop().delay(delay).animate({'margin-left': position }, 1000, 'easeOutExpo').attr('rel','active');            
        }       
    };


    function hide(active, whereTo, currentToHideSide){

        var all = ($('img[ rel |= active]').get()).length;
        for (var i = 1; i<= all ; i++){
            if ($('.'+[active]+'_img'+[i]).attr('rel') == 'active') {
                $('.'+[active]+'_img'+[i]).stop().delay([i]+'00').animate({'margin-left': whereTo }, 1000, 'easeInExpo').attr('rel', currentToHideSide );
            }
        } 

    };

};

jQuery().showProducts('spring');

});
4

1 に答える 1

1

アニメーション中にリンクがクリックされないようにするだけの場合は、これをクリックに追加します。

$('.package_box_menu li').children().click(function(){
    if($('img[class$=img1]').is(':animated')) {
      event.preventDefault();
      return false;
    }

    $(this).showProducts($(this).attr("id"));

});

これは、アニメーション中のクリックを単に拒否し、停止すると機能します。$(this) は、スライドなどのアニメーション化されているものに置き換えることができます:)

ノート

HTML が表示されていないため、セレクターでいくつかの仮定を行う必要がありました。'_img1').attr("rel");

サイトを Fiddle にコピーし、ここで言及した変更で機能するようにしました

于 2012-06-27T13:21:38.383 に答える