1

.animate で動かしているスライド画像がいくつかあります。矢印をクリックしてもう一度進めると、スライドがめちゃくちゃになってしまいます。

これが何が起こっているかへのリンクです。http://leadgenixhosting.com/~intmed/

これは私がこれまで持っているjsです：

$(document).ready(
function(){

    $('#mast').hover(
        function(){
            $('#out-right').hide().attr('src','');
            $('#in-right').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/on_03.gif');
            $('#out-left').hide().attr('src','');
            $('#in-left').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/on_07.gif');
        },
        function(){
            $('#in-right').hide().attr('src','');
            $('#out-right').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/off_03.gif');
            $('#in-left').hide().attr('src','');
            $('#out-left').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/off_07.gif');
        }
    );

    /*Picture Setup
    -------------------------------------------------*/

    var gallery_images = [];
    var divs = ['one','two','three','four'];

    $('#image_container img').each(
        function(){
            gallery_images[gallery_images.length] = $(this).attr('src');
            $(this).hide();
        }
    );

    $('#'+divs[0]+'').css('background-image','url('+gallery_images[0]+')');

    var total_images = gallery_images.length;

    //Images

    var current = 0;

    //Divs

    var current_image = 0;
    var previous_image = divs.length - 1;
    var two_prev = divs.length - 2;
    var next = current_image + 1;

    /*Image Switch
    -------------------------------------------------*/

    function imageSwitch(){

        current++;
        current_image++;
        previous_image++;
        next++;
        two_prev++

        if(two_prev >= divs.length){
            two_prev = 0;   
        }

        if(current >= gallery_images.length){
            current = 0;    
        }

        if(previous_image >= divs.length){
            previous_image = 0; 
        }

        if(current_image >= divs.length){
            current_image = 0;
        }

        if(next >= divs.length){
            next = 0;
        }   

        $('#'+divs[current_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000})
        $('#'+divs[current_image]+'').css('background-image','url('+gallery_images[current]+')');

        $('#'+divs[previous_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000});

        $('#'+divs[next]+'').animate({left: '+=1020px', top: '-=10000px'}, 1000);

        $('#'+divs[two_prev]+'').animate({left: '+=1020px', top: '+=10000px'}, 1000);
    }

    function imageBack(){

        current--;
        current_image--;
        previous_image--;
        next--;
        two_prev--;

        if(two_prev < 0){
            two_prev = divs.length - 1; 
        }

        if(current < 0){
            current = divs.length - 1;  
        }

        if(previous_image < 0){
            previous_image = divs.length - 1;   
        }

        if(current_image < 0){
            current_image = divs.length - 1;
        }

        if(next < 0){
            next = divs.length - 1;
        }   

        $('#'+divs[current_image]+'').animate({left:'+=1020px'},{queue:false,duration:1000});
        $('#'+divs[current_image]+'').css('background-image','url('+gallery_images[current]+')');

        $('#'+divs[previous_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000});

        $('#'+divs[next]+'').animate({left: '-=1020px', top: '+=10000px'}, 1000);

        $('#'+divs[two_prev]+'').animate({left:'-=1020px'},{queue:false,duration:1000});
    }

    /*Image Buttons
    ----------------------------------------*/

    $('#in-right').click(
        function(){
            imageSwitch();
        }
    );

    $('#in-left').click(
        function(){
            imageBack();
        }
    );
}
);
4

2 に答える 2

4

API: .stop http://api.jquery.com/stop/

一致した要素で現在実行中のアニメーションを停止します。

@ahrenが述べたように、is(":animated")これらを読みたい場合は、単純な条件付きチェックを使用できます。

http://api.jquery.com/animated-selector/

ここに実装があります: jquery is(":visible") and is(":animated") bug during animation?

于 2012-08-07T22:20:21.517 に答える
0 
$('#element').animate({..properties..}, time_interval, function() {
    // When here, you know that animate has finished
});
于 2012-08-07T22:21:21.113 に答える