मुझे एनिमेट करने के लिए लगभग 100 विभिन्न चयनों को कैश करने की आवश्यकता है। निम्नलिखित नमूना कोड है। क्या दूसरे नमूने में कोई सिंटैक्स समस्या है? यदि यह चयनों को कैश करने का यह तरीका नहीं है, तो यह निश्चित रूप से इंटरवेब पर सबसे लोकप्रिय है। तो मुझे क्या याद आ रही है?

नोट: p नीचे दिए गए $.path.bezier(p) में jQuery.path.bezier को पास किया गया एक सही ढंग से घोषित ऑब्जेक्ट है (वैसे, बहुत बढ़िया एनिमेशन लाइब्रेरी)

यह काम करता है

    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $('#image1').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $('#image2').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

यह काम नहीं करता

    var $one = $('#image1'); //problem with syntax here??
    var $two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }
2
David Fox 7 जून 2010, 23:55

5 जवाब

सबसे बढ़िया उत्तर

यदि आप उन्हें कॉल करते समय छवियों को लोड नहीं करते हैं, तो jQuery एक खाली वस्तु लौटाएगा। अपने असाइनमेंट को अपने document.ready फ़ंक्शन के अंदर ले जाएं:

$(document).ready(function() {
    var $one = $('#image1');
    var $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

यदि आपको अपनी प्रारंभिक स्क्रिप्ट के बाहर बाद में उपयोग के लिए उन्हें कैश करने की आवश्यकता है तो उन्हें स्टोरेज ऑब्जेक्ट में जोड़ें:

var my_storage_object = {};
$(document).ready(function() {
    var $one, $two;
    my_storage_object.$one = $one = $('#image1');
    my_storage_object.$two = $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

फिर बाद में, document.ready के बाहर आप कॉल कर सकते हैं:

my_storage_object.$one //still has a reference to the jQuery object.
5
Sean Vieira 23 सितंबर 2011, 20:22
   var one = $('#image1');
   var two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

ठीक कर

कब आप करेंगे:

   var one = $('#image1');

आप चयनकर्ता द्वारा var "one" में लौटाए गए jQuery ऑब्जेक्ट को संग्रहीत कर रहे हैं। तो आपको अब $ का उपयोग करने की आवश्यकता नहीं है।

2
fmsf 7 जून 2010, 23:57

ये कोशिश करें:

var $one;
var $two;
$(document).ready(function() {
    $one = $('#image1');
    $two = $('#image2');
    animate1();
    animate2();
})
function animate1() {
    $one.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate1()", 3000);
}
function animate2() {
    $two.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate2()", 3000);
}

वैरिएबल को वैश्विक दायरे में परिभाषित किया गया है, लेकिन दस्तावेज़ तैयार होने पर चयनकर्ताओं को निष्पादित किया जाता है।

2
marapet 8 जून 2010, 00:06

इसके अलावा परिवर्तनीय घोषणाएं बाहर होनी चाहिए, लेकिन चयनकर्ता $(दस्तावेज़) के अंदर होना चाहिए। तैयार (), शायद वे छवियां अभी तक तैयार नहीं हैं अन्यथा?

संपादित करें, इस तरह:

var one;
var two;
$(document).ready(function() {
     one = $('#image1');
     two = $('#image2'); 
     animate1();
     animate2();
})
2
dain 8 जून 2010, 00:09

आपके jQuery चयनकर्ताओं को हमेशा .ready() ब्लॉक के अंदर होना चाहिए, तो क्यों न वहां सब कुछ रखा जाए? इस तरह आप वैश्विक दायरे में कुछ भी नहीं छोड़ते हैं।

$(document).ready(function() {
    var storedGlobals = {
        $one: $('#image1'),
        $two: $('#image2')
    };
    animate1(); 
    animate2(); 

    function animate1() { 
        storedGlobals.$one.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate1()", 3000); 
    } 
    function animate2() { 
        storedGlobals.$two.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate2()", 3000); 
    }
});
0
jasongetsdown 8 जून 2010, 00:38