Question

我无法理解为什么它现在不起作用。我写道：

$(function() {
    $('a').click(function(){
        $('div#box').animate({
            opacity: 1
        });
    });
});

div {
    width: 250px;
    height: 250px;
    background-color: #000040;
    display: none;
}

并且它不是fadeIn()。我怎么能做这些简单的事情？

Answer 1

编辑：虽然以下情况有效，但查看jQuery源代码会发现这更容易：

$(function() {
    $('a').click(function(){
        $('#box').animate({
            opacity: "show"
        });
        return false;
    });
});

以下是jQuery源代码的相关部分，它定义了这些slideDown / Up / Toggle和fadeIn / Out函数：

// 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" }
}, function( name, props ){
    jQuery.fn[ name ] = function( speed, callback ){
        return this.animate( props, speed, callback );
    };
});

CSS规则“display: none”并不意味着它是透明的，这意味着它根本不显示。您需要将显示设置为block，然后设置动画。您可能希望在单击函数中返回false，以便链接不会最终将用户带到另一个页面（或者您可以将href属性设置为“＃”，您可能已经在做）。

$(function() {
    $('a').click(function(){
        $('#box').css('opacity', '0');
        $('#box').css('display', 'block');
        $('#box').animate({
            opacity: 1
        });
        return false;
    });
});

如何使用animate（{}）重写简单效果fadeIn（），fadeOut（），slideUp（），slideDown（）？

1 个答案: