Question

我正在尝试关闭div设置他的不透明度为0.但它不起作用

这是我的代码：

HTML：

<div id='divinfo'  style='position:absolute; bottom:2px; right:8px; width:40px; height: 41px; '><img id='divinfo' ontouchstart='openhelp();return false;' src='img/button_settings_inactive.png'></img></div>


         <div id='janelaConfig' style="display:block; opacity:0.0; height:5px; position:absolute; width:50px; left:100px; top: 175px; background-color:white; padding:20px;">

             <div id="wrapper2">
                 <div id="scroller2">
                     <p>Escolha sua regiao </p>
                     <form id="form1" name="form1" method="post" action="">
                         <label for="txtRegiao"></label>
                         <select name="estado" id="estado" onchange="setCidade(this.SelectedIndex)">
                             <option name="BR" value="BR">Barueri</option>
                             <option name="BH" value="BH">Belo Horizonte</option>
                             <option name="BS" value="BS">Brasilia</option>
                             <option name="CP" value="CP">Campinas</option>
                             <option name="CU" value="CU">Cuiaba</option>
                             <option name="CT" value="CT">Curitiba</option>
                             <option name="DI" value="DI">Diadema</option>
                             <option  value="DQ">Duque de Caxias</option>
                             <option value="FL">Florianopolis</option>
                             <option value="FO">Fortaleza</option>
                             <option value="GO">Goiania</option>
                             <option value="GU">Guarulhos</option>
                             <option value="PA">Porto Alegre</option>
                             <option value="OS">Osasco</option>
                             <option value="RE">Recife</option>
                             <option value="RJ">Rio de Janeiro</option>
                             <option value="SS">Salvador</option>
                             <option value="SA">Santo Andre</option>
                             <option value="SB">São Bernardo do Campo</option>
                             <option value="SC">São Caetano do Sul</option>
                             <option value="SP">São Paulo</option>
                             <option value="VI">Vitória</option>
                         </select>
                         <p>Audio</p>
                         <select name="audio" id="audio" onchange="setAudio(this.SelectedIndex)">
                             <option value="on">Ligado</option>
                             <option value="off">Desligado</option>
                             <select><br><br><br>
                                 </form>
                     <p>&nbsp;</p>
                 </div>
                 <p>&nbsp;</p>
                 </div>
             </div>
                <div id="close"><img id='fechar' ontouchstart='closehelp();return false;' style='display:none; position:absolute; top:10px; right:3px;'  src='img/btn-fechar.png' /></div>

jQuery的：

function closehelp() {

    $("#janelaConfig").animate({
        width: "50px",
        height: "5px",
        top: "175px",
        left: "100px",
        opacity: 0.0

    }, 250);
    $("#lblStatus").text("");
    $("#fechar").hide();

    $("#divinfo").show();
};

function openhelp() {

    $("#janelaConfig").animate({
        width: "82%",
        height: "70%",
        top: "20px",
        left: "8px",
        opacity: 0.9

    }, 250, function () {
        $("#fechar").show();

    });

};

Answer 1

不幸的是，处理不透明度的最好方法是使用几个CSS标记：

.myElement {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    opacity:0.5;
}

但是，一旦你的不透明度达到0，你可能最好只用

隐藏元素

display:none;

Answer 2

opacity只会更改元素opacity的{{1}}，width和height不受影响。实际上，元素仍然存在，它只是隐形。

Answer 3

根据您对其他答案的评论：

function closehelp() {
    $("#janelaConfig").animate({ width: "50px", height: "5px", top : "175px", left : "100px", opacity: 0.0,display:"none" },250);
    $("#lblStatus").text("");
    $("#fechar").hide();
    $("#divinfo").show();
};

将您的功能更改为：

function closeHelp() {
    $('#janelaConfig').animate({
        height: 5,
        top: 175,
        left: 100,
        opacity: 0
    }, 250, function() {
        $(this).hide();
    });
    $("#lblStatus").text("");
    $("#fechar").hide();
    $("#divinfo").show();
})

在动画完成后，这会将您的元素display设置为none 。

Answer 4

我创建了另一个div并将janelaConfig放入其中..它很棒

隐藏div的更好方法

4 个答案: