Question

我有一个div设置为可见性：隐藏在我想要稍后显示的CSS中。这是我到目前为止的jQuery，它不起作用：

$(document).ready(function() {
    $('#start').click(function() {
        $(this).fadeOut(1000, function() {
             $('body').css('background-color','#999', function() {
                    $('.menu').fadeTo('slow',1);
             });
        });
    });
});

以下内容应按顺序进行：

用户点击“#start”和“#start”淡出。（这种情况发生了。）
页面的背景颜色从原始颜色变为灰色。（这种情况发生了。）
div'.menu'应该淡入。（这不会发生。）

我做错了什么？如果它有所不同，'.menu'只会填充一堆子div。

Answer 1

fadeTo更改元素的opacity属性，您应该使用opacity而不是visibility或将元素的display属性设置为{{ 1}}并使用none方法。

另请注意，fadeIn不接受3个参数。

css

.menu { display: none }

但是，如果要更改$(document).ready(function() { $('#start').click(function() { $(this).fadeOut(1000, function() { $('body').css('background-color','#999'); $('.menu').fadeIn('slow'); }); }); });属性，可以使用visibility方法：

css

Answer 2

http://api.jquery.com/css/ .css（）没有第三个参数，它接受css属性和值的2个参数或css属性 - 值对的对象。

同样指出“未定义”，你必须注意不透明度，可见度和显示。每个都可以使对象不可见，但在jquery动画中表现不同。

.fadeTo（）仅更改对象的不透明度。 .fadeIn（）将display:none的对象更改为display:block，然后更改不透明度。

如果你的对象有visibility:hidden，你实际上必须先将可见性设置为visible，将不透明度设置为0，然后使用fadeTo（）。

我建议（比如“未定义”写）使用display:none代替visibility:hidden并使用fadeIn()代替fadeTo()

$('body').css('background-color','#999');
$('.menu').fadeIn('slow',1);

如何将div设置为可见性：隐藏以使用jQuery显示？

2 个答案: