Как работает jquery fadeIn? Делаем то же самое с animate()

Question

Я люблю простой JQuery fadeIn() функция, особенно потому, что она работает без необходимости устанавливать какие-либо значения непрозрачности для селектора! Просто установите его display:none и используя fadeIn() всегда работает.

Однако я не использую jQuery для моего текущего проекта, но zepto.js. Zepto поставляется только с animate() а не с fadeIn(),

Интересно, как я могу создать такое же поведение с помощью функции animate! Какие свойства мне нужно оживить здесь?

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

заранее спасибо

Answer 1

(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(); должен сделать свое дело.

РЕДАКТИРОВАТЬ: Трейдер прав, поправил части.

Answer 2

Функция 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 );
    };
});

Answer 3

Вы можете попробовать это. Я сделал небольшую демонстрацию. Вы должны сделать его непрозрачным 0, а затем заставить его отображать: блок, затем анимировать непрозрачность.

проверьте эту скрипку http://jsfiddle.net/dTRhQ/

Тем не менее, это сделано в jq, я надеюсь, что вы можете найти подходящую реализацию в вашей среде