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')

感谢您提前阅读此信息。

- matt

---

.fadeIn() 函数很可能只是调用了 jQuery 的 .animate() 函数，因此请尝试在 jQuery 代码 中查找它。 - Anthony Grist

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(); 应该可以解决问题。

编辑：Trejder是对的，已经调整了部分内容。

- Sem

---

你的解决方案看起来很棒，但根据我对JavaScript的了解，你应该使用typeof(ms) === 'undefined'而不是ms == undefined，因为在JS中没有像undefined这样的关键字，而这种情况下（在某些特定情况下）甚至可以是一个具有值的变量！ - trejder

当然，要使用 display: 'block' 而不是 display: block，因为在这里 block 是一个未定义的变量！ - trejder

Answer 2

jQuery的fadeIn函数只是jQuery animate函数的一种快捷方式。它通过递增不透明度值，在一段时间内将不透明度从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 );
    };
});

- Stieffers

Answer 3

你可以尝试这个。我做了一个小演示。你需要把它的不透明度设为0，然后将其显示为块，再用动画来改变不透明度。

请查看这个链接 http://jsfiddle.net/dTRhQ/

但是，这是在jq中完成的，希望你能在你的框架中找到合适的实现方式。

- Shades88