アニメーションフェード| jQueryと純粋なjs | setIntervalとsetTimeoutの比較

Question

以下のテスト済みの関数は、要素をフェードインまたはフェードアウトさせるのに問題ありません。

JQueryを使用して得られるものは何ですか？コア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(); 
}; 

は（）私はここで1本のヒットを得る：

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このようDOM manipulation、AJAX呼び出しは、effects（例えば.fadeIn/.fadeOutなど）とotherapplicationsを適用するだけで、クロスブラウザの方法でCSSプロパティを設定するなど、物事を簡単にするためにそれ自体のライブラリ。

ちょっとだけ、jQueryを追加しないことをお勧めします。しかし、私の推論は、あなたはおそらく長期的には機能がますます多くを利用しようとしているので、それを使用しない本当の理由は見当たりません。

独自のfadeInまたはfadeOut関数を実装することについては、jQuery sourceを見て、それらのメソッドを抽出するか、独自の実装を最初から作成することができます。しかし、jQueryがすでにこのメソッドを実装していることを考えると、教育的目的以外に、なぜそれを複製したいのかわかりません。

Answer 2

私の意見では、JQueryをカスタムコードに使用する最大の理由は、複数のブラウザと複数のバージョンのコードを管理する必要がないということです。 JQueryは、主要なブラウザーの不具合を処理するのに適しています。

さらに、JQueryの他の優れた用途は、後で使用することができます。あなたはjQueryのダウンロードコードを、に関する

：http://docs.jquery.com/Downloading_jQueryあなたが読めるように意図された非圧縮のバージョンを取得することができます。

JQueryからこれらの関数だけを取得する簡単な方法はわかりません。なぜ完全なライブラリを使用しないのですか？