8

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

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

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

$('#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 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 );
    };
});
于 2012-08-02T12:43:06.477 回答
-1

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

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

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

于 2012-08-02T13:17:18.523 回答