2012-08-02 15 views
7

シンプルなjQuery fadeIn()関数が好きです。特に、不透明度の値をセレクタに設定しなくても機能するためです。 display:noneに設定し、fadeIn()を使用するだけで、常に動作します。jquery fadeInはどのように機能しますか? animate()で同じことを行う

しかし私は現在のプロジェクトではなく、zepto.jsでjQueryを使用しています。 Zeptoにはanimate()が付属し、fadeIn()には含まれません。

アニメーション機能で同じ動作をどのように作成できるのでしょうか。ここでどのようなプロパティをアニメーション化する必要がありますか?

$('#selector').animate({ 
    display: "block", 
    opacity: 1 
}, 500, 'ease-out') 

jQueryのフェードイン機能は、jQueryのアニメーション機能にただのショートカットです事前に

+0

あなたの枠組みの中で適切な実装を見つけることができることを望む '.fadeIn()'関数はおそらくちょうどjQueryの '.animateを(呼び出します) '関数を使っているので、[jQuery code](http://code.jquery.com/jquery-1.7.2.js)で探してみてください。 –

答えて

8
(function($){ 
     $.extend($.fn, { 
     fadeIn: function(ms){ 
      if(typeof(ms) === 'undefined'){ 
      ms = 250; 
      } 
      $(this).css({ 
      display: 'block', 
      opacity:0 
      }).animate({ 
      opacity: 1 
      }, ms); 
      return this; 
     } 
     }) 
    })(Zepto) 

ZeptoはjQueryの$('.example').fadeIn();のように動作している場合、トリックを行う必要があります。

EDIT:Trejderが正しく、部品を調整しました。

+1

あなたのソリューションはすばらしく見えますが、私がJavascriptについて読んだことによると、 'typeof(ms)=== 'undefined''を' ms == undefined'ではなく 'undefined 'JSでは、これは(ある状況では)値を持つ変数でもあります。 – trejder

+1

そして、もちろん! - 'display: 'block'、'、not、 'display:block、'、 'block'はここでは定義されていない変数です! – trejder

+1

@trejder固定! :) – Sem

3

、ありがとうございました。不透明度の値を増やして一定期間にわたって不透明度を0から1に変更します。

// Generate shortcuts for custom animations 
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); 
    }; 
}); 
-1

これを試すことができます。私は少しデモを作った。それを不透明度0にしてから、それを表示させます:ブロックし、次に不透明度をアニメーション化します。このバイオリンはhttp://jsfiddle.net/dTRhQ/

しかし、それはJQで行われ

チェックは、私が

関連する問題