jquery fadeIn 是如何工作的？用 animate() 做同样的事情

Posted 2023-02-22

【中文标题】jquery fadeIn 是如何工作的？用 animate() 做同样的事情

【英文标题】：how does jquery fadeIn work? Doing the same with animate()

【发布时间】：2012-07-31 10:17:37

【问题描述】：

我喜欢简单的 jQuery fadeIn() 函数，特别是因为它无需为选择器设置任何不透明度值即可工作！只需将其设置为 display:none 并使用 fadeIn() 始终有效。

但是，我当前的项目不是使用 jQuery，而是 zepto.js。 Zepto 仅带有 animate() 而不是 fadeIn()。

我想知道如何使用 animate 函数创建相同的行为！我必须在这里为哪些属性设置动画？

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

提前谢谢你

【问题讨论】：

.fadeIn() 函数可能只是调用了 jQuery .animate() 函数，因此请尝试在 jQuery code 中查找它。

【参考方案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 是对的，调整了部分。

【讨论】：

您的解决方案看起来不错，但根据我读到的有关 javascript 的内容，您应该使用 typeof(ms) === 'undefined'，而不是 ms == undefined，因为在 JS 中没有像 undefined 这样的关键字（在某些特定情况下）甚至可以是一个有值的变量！

还有——当然！ -- display: 'block',，不是display: block,，因为block 在这里是一个未定义的（原文如此！）变量！

@trejder 已修复！ :)

【参考方案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 );
    ;
);

【参考方案3】：

你可以试试这个。我做了一个小演示。你必须让它的不透明度为0，然后让它显示：块然后为不透明度设置动画。

检查这个小提琴http://jsfiddle.net/dTRhQ/

不过，这是在 jq 中完成的，我希望你能在你的框架中找到合适的实现