8

シンプルな jQueryfadeIn()関数が気に入っています。特に、不透明度の値をセレクターに設定しなくても機能するからです。に設定してdisplay:none使用するだけでfadeIn()常に機能します。

ただし、現在のプロジェクトでは jQuery を使用していませんが、zepto.js を使用しています。ゼプトのみ付属しanimate()、付属しませんfadeIn()。

アニメーション機能でどうやって同じ動作を作ることができるのだろう！ここでアニメーション化する必要があるプロパティは何ですか?

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

前もって感謝します

4

3 に答える 3

9 
(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();のように機能する場合は、うまくいくはずです。

編集: Trejder は正しく、パーツを調整しました。

于 2012-08-02T12:48:36.610 に答える
3

jQueryのfadeIn関数は、jQueryのアニメーション関数へのショートカットにすぎません。不透明度の値をインクリメントすることにより、一定期間にわたって不透明度を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 );
    };
});
于 2012-08-02T12:43:06.477 に答える
-1

あなたはこれを試すことができます。少しデモをしました。不透明度を0にしてから、display：blockにしてから、不透明度をアニメートする必要があります。

このフィドルを確認してくださいhttp://jsfiddle.net/dTRhQ/

ただし、これはjqで行われるため、フレームワークに適切な実装が見つかることを願っています。

于 2012-08-02T13:17:18.523 に答える