jquery - 如何使用 animate({ }) 重写简单的效果fadeIn()、fadeOut()、slideUp()、slideDown()？

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”并不意味着它是透明的，它意味着它根本不显示。您需要将 display 设置为block，然后设置动画。您可能希望false在 click 函数中返回，以便链接不会最终将用户带到另一个页面（或者您可以将 href 属性设置为“#”，您可能已经这样做了）。

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