एनीमेशन फीका | jQuery बनाम शुद्ध जेएस | setInterval बनाम setTimeout

Question

मेरे पास यह परीक्षण फ़ंक्शन नीचे है जो किसी तत्व को बाहर या बाहर लुप्त करने के लिए ठीक काम करता है।

JQuery का उपयोग करके मुझे क्या लाभ होता है?

धन्यवाद

Effects.prototype.fade = function(direction, max_time, element) 
{ 
    var elapsed = 0; 
    function next() { 
     elapsed += 10; 
     if (direction === 'up') 
     { 
      element.style.opacity = elapsed/max_time; 
     } 
     else if (direction === 'down') 
     { 
      element.style.opacity = (max_time - elapsed)/max_time; 
     } 
     if (elapsed <= max_time) { 
      setTimeout(next, 10); 
     } 
    } 
    next(); 
}; 

fadein() कोर jQuery पुस्तकालय पर पर एक खोज चल रहा है मैं यहाँ एक हिट मिलती है:

jQuery.each({ 
    slideDown: genFx("show", 1), 
    slideUp: genFx("hide", 1), 
    slideToggle: genFx("toggle", 1), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" }, 
    fadeToggle: { opacity: "toggle" } 
}, function(name, props) { 
    jQuery.fn[ name ] = function(speed, easing, callback) { 
     return this.animate(props, speed, easing, callback); 
    }; 
}); 

JQuery Source Viewer

function (prop, speed, easing, callback) { 
    var optall = jQuery.speed(speed, easing, callback); 
    if (jQuery.isEmptyObject(prop)) { 
     return this.each(optall.complete, [false]); 
    } 
    prop = jQuery.extend({}, 
    prop); 
    return this[optall.queue === false ? "each" : "queue"](function() { 
     if (optall.queue === false) { 
      jQuery._mark(this); 
     } 
     var opt = jQuery.extend({}, 
     optall), 
      isElement = this.nodeType === 1, 
      hidden = isElement && jQuery(this).is(":hidden"), 
      name, val, p, display, e, parts, start, end, unit; 
     opt.animatedProperties = {}; 
     for (p in prop) { 
      name = jQuery.camelCase(p); 
      if (p !== name) { 
       prop[name] = prop[p]; 
       delete prop[p]; 
      } 
      val = prop[name]; 
      if (jQuery.isArray(val)) { 
       opt.animatedProperties[name] = val[1]; 
       val = prop[name] = val[0]; 
      } else { 
       opt.animatedProperties[name] = opt.specialEasing && opt.specialEasing[name] || opt.easing || "swing"; 
      } 
      if (val === "hide" && hidden || val === "show" && !hidden) { 
       return opt.complete.call(this); 
      } 
      if (isElement && (name === "height" || name === "width")) { 
       opt.overflow = [this.style.overflow, this.style.overflowX, this.style.overflowY]; 
       if (jQuery.css(this, "display") === "inline" && jQuery.css(this, "float") === "none") { 
        if (!jQuery.support.inlineBlockNeedsLayout) { 
         this.style.display = "inline-block"; 
        } else { 
         display = defaultDisplay(this.nodeName); 
         if (display === "inline") { 
          this.style.display = "inline-block"; 
         } else { 
          this.style.display = "inline"; 
          this.style.zoom = 1; 
         } 
        } 
       } 
      } 
     } 
     if (opt.overflow != null) { 
      this.style.overflow = "hidden"; 
     } 
     for (p in prop) { 
      e = new jQuery.fx(this, opt, p); 
      val = prop[p]; 
      if (rfxtypes.test(val)) { 
       e[val === "toggle" ? hidden ? "show" : "hide" : val](); 
      } else { 
       parts = rfxnum.exec(val); 
       start = e.cur(); 
       if (parts) { 
        end = parseFloat(parts[2]); 
        unit = parts[3] || (jQuery.cssNumber[p] ? "" : "px"); 
        if (unit !== "px") { 
         jQuery.style(this, p, (end || 1) + unit); 
         start = (end || 1)/e.cur() * start; 
         jQuery.style(this, p, start + unit); 
        } 
        if (parts[1]) { 
         end = (parts[1] === "-=" ? -1 : 1) * end + start; 
        } 
        e.custom(start, end, unit); 
       } else { 
        e.custom(start, val, ""); 
       } 
      } 
     } 
     return true; 
    }); 
} 

Answer 1

आप डॉन का उपयोग आमतौर पर एक ही प्रभाव के लिए jQuery जैसी लाइब्रेरी शामिल नहीं है, लेकिन एक सामान्य purpo के रूप में आदेश, इस तरह के डोम manipulation, AJAX कॉल के रूप में चीजों को आसान बनाने के लिए effects (जैसे .fadeIn/.fadeOut) और otherapplications लागू करने के लिए एक रास्ता है कि पार ब्राउज़र में CSS गुण स्थापित करने के अलावा में से पुस्तकालय।

युक्तिबद्ध रूप से यह अनुशंसा की जाती है कि आप केवल एक साधारण कॉल के लिए jQuery नहीं जोड़ें। लेकिन मेरी तर्क यह है कि आप शायद लंबे समय तक इसकी अधिक से अधिक सुविधाओं का फायदा उठाने जा रहे हैं, इसलिए मुझे इसका उपयोग न करने का असली कारण नहीं दिख रहा है।

अपने स्वयं के फीडइन या फीडऑट फ़ंक्शंस को लागू करने के विषय पर, आप jQuery source पर देख सकते हैं और उन विधियों को निकाल सकते हैं, या स्क्रैच से अपना स्वयं का कार्यान्वयन कर सकते हैं। लेकिन इस तथ्य को देखते हुए कि jQuery ने पहले से ही इस विधि को लागू किया है, मैं नहीं देखता कि शैक्षिक उद्देश्यों के अलावा, आप इसे दोहराना क्यों चाहते हैं।

Answer 2

मेरी राय में JQuery का उपयोग करने का सबसे बड़ा कारण, मेरी राय में, आपको एकाधिक ब्राउज़र और एकाधिक संस्करणों के लिए कोड को बनाए रखने की आवश्यकता नहीं है। JQuery आपके लिए प्रमुख ब्राउज़रों के quirks को संभालने का एक अच्छा काम करता है।

इसके अतिरिक्त, JQuery के लिए कई अन्य उत्कृष्ट उपयोग हैं जिन्हें आप बाद में उपयोग करना चाहते हैं।

कोड के बारे में, जब आप JQuery: http://docs.jquery.com/Downloading_jQuery डाउनलोड करते हैं तो आप असम्पीडित संस्करण प्राप्त कर सकते हैं, जिसे पठनीय होने का इरादा है।

मुझे JQuery से केवल उन कार्यों को प्राप्त करने के लिए एक आसान तरीका नहीं पता है। पूर्ण पुस्तकालय का उपयोग क्यों नहीं करें?