स्लाइड गैलरी (jquery)

Question

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

$('span#pijll').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').animate({'left': '+=' +slide+ 'px'},'fast','linear'); 
    } 
}); 




}); 

इस कोड को मैंने एक साधारण स्लाइड गैलरी के लिए लिखा था। जब मैं तीर बटन पर तेज़ी से क्लिक करता हूं तो सब ठीक काम करता है। यह मेरे द्वारा स्थापित मूल्यों (यूरेक्ट्स और उलंक्स) से आगे जाएगा।

मैंने .animate से पहले 'stop()' डालने का प्रयास किया, लेकिन इससे मदद नहीं मिली। आशा है कि आप लोग इसे हल करने के बारे में कुछ सलाह दे सकते हैं। अग्रिम में धन्यवाद!

Answer 1

अगर यह संक्रमण मोड में पहले से ही है निर्धारित करने के लिए अपने क्लिक समारोह में एक bool डालने की कोशिश करो कोशिश करो।

var inClick = false; 

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    if(inClick) return; 

    inClick = true; 

    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear', function() { inClick = false; }); 
    } 
    else inClick = false; 
}); 

$('span#pijll').click(function(e) { 
    if(inClick) return; 

    inClick = true; 

    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').animate({'left': '+=' +slide+ 'px'},'fast','linear', function() { inClick = false; }); 
    }  
    else inClick = false; 
}); 




}); 

इस तरह आपके उपयोगकर्ता को फिर से क्लिक करने के लिए संक्रमण के लिए इंतजार करना होगा।

Answer 2

का उपयोग कर stop(true,true)

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').stop(true,true).animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

$('span#pijll').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').stop(true,true).animate({'left': '+=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

}); 

Answer 3

इस तरह, कुछ सशर्त जोड़ने के बारे में क्या:

$('span#pijlr').click(function(e) { 
    if (!$('#gallcont').is(':animated')) { 
     var slide = 500; 
     var variable = $('#gallcont').css('left'); 
     var urechts = "-1000px"; 
     if(variable > urechts) { 
     $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
     } 
    } 
}); 

कुछ ऐसे ही घटना को रद्द होगा, जबकि स्लाइड एनिमेट है ..