0

我不明白为什么它现在不起作用。我写:

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

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

但事实并非如此fadeIn()。我该怎么做这些简单的事情?

4

1 回答 1

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;
    });
});
于 2009-07-24T15:27:31.077 回答