Question

我正在尝试使用HTML按钮淡出（点击它之后）并使用jQuery显示一个表...它的工作效果不佳。这是我的HTML，CSS和Js。

 <br>
        <button id="boutton" ;
            <p id="boutton"> Meteo du Jour! </p>
        </button>
        <table id="tableau">
            <tr>
                <td>
                    <table>
                        <thead>
                            <tr>

我的CSS

 #boutton {
    color: blue;
    height: 30px;
    width: 150px;
    background-color: #8b8b8b;
    text-align:center;
    margin:auto;
    border: 5px #2d2d2d solid;
    border-radius: 10px;
}

#tableau {
    border: 8px solid #2d2d2d;
    width: 50%;
    height: 25%;
    border-radius: 20px;
    visibility: hidden;
}

table {
    border: 8px solid blue;
    width: 50%;
    height: 25%;
    border-spacing: 25px;
    background: #8b8b8b;
    border-radius: 20px;
    visibility: hidden;
}

这是我的jQuery

$("#boutton").click(function(){
$("#tableau").css({"visibility":"visible"});
$("table").css({"visibility":"visible"});
$("#boutton").fadeOut(slow, linear);

Answer 1

这是一个适合你的jsFiddle

jsFiddle

你的jQuery中有一些错误（缺少括号，括号）所以我修复了那些并删除了一些我发现冗余的东西

$("#boutton").click(function() {
$("#tableau").css({"visibility":"visible"});
$("#boutton").fadeOut("slow");
});

祝你好运！

Answer 2

添加到Josh的解决方案中，您可以使用jQuery切换来隐藏/显示表格。

jQuery documentation

<强> JQUERY

$("#boutton").click(function() {
    $("#tableau").toggle();
    $("#boutton").fadeOut("slow");
});

<强> CSS

#tableau {  
    display: none;
}

jsFiddle

在jQuery（按钮）中寻求帮助

2 个答案: