2

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

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

以下应按顺序发生：

  1. 用户单击“#start”，“#start”消失。（有时候是这样的。）
  2. 页面的背景颜色从原来的颜色变为灰色。（有时候是这样的。）
  3. div '.menu' 应该淡入。（这不会发生。）

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

4

2 回答 2

1

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

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

.menu { display: none }


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

但是，如果要更改visibility属性，可以使用css方法：

$('.menu').css('visibility', 'visible');
于 2013-02-17T20:32:13.323 回答
1

http://api.jquery.com/css/ .css() 没有第三个参数，它要么接受一个 css 属性和值的 2 个参数，要么接受一个 css 属性-值对的对象。

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

.fadeTo() 只改变对象的不透明度。.fadeIn() 用display:noneto改变一个对象，display:block然后改变不透明度。

如果你有一个对象，visibility:hidden你实际上必须首先将可见性设置visible为 0 并将不透明度设置为 0，然后使用 fadeTo()。

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

$('body').css('background-color','#999');
$('.menu').fadeIn('slow',1);
于 2013-02-17T20:42:20.433 回答