Question

我希望在onClick中有一个div淡入淡出，并在点击div中的某些内容时再次淡出。但是，由于某种原因，我第一次尝试显示它刚出现的div，但它第一次隐藏，而且每次显示/隐藏它都会正常消失。这就是我对淡入淡出功能的看法：

<script>
    function show_eform() {
        document.getElementById('eform').style.visibility = 'visible';
        $('#eform').fadeIn('fast');
    }
    function hide_eform() {
        $('#eform').fadeOut('fast', function(){
            document.getElementById('eform').style.visibility = 'hidden';
        });
    }
</script>

对于div的CSS：

background: rgba(0, 0, 0, 0.5);
margin: auto;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 50;
visibility: hidden;

要触发：

<a href="#" onclick="show_eform()">

Answer 1

试试这个

function show_eform() {
    $('#eform').fadeIn('fast');
}

function hide_eform() {
    $('#eform').fadeOut('fast');
}

并使用display: none;代替visibility: hidden;，如：

background: rgba(0, 0, 0, 0.5);
margin: auto;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 50;
display: none;

Answer 2

这是一个小提琴，可以帮助您理解fadein / fadeout和切换功能： http://jsfiddle.net/g9AU9/1/

对于fadeIn / fadeOut / toggle类型的函数，您不必设置任何可见性状态，这些函数会为您处理。

HTML

<div id="eform" style="display:none;">This is an eform</div>
<div class="toggle_form">Toggle Eform</div>
<div class="hide_form">Hide Eform</div>

CSS

#eform { background:orange; padding:10px; }
.toggle_form { background:yellow; padding:10px; cursor:pointer; }
.hide_form { background:lime; padding:10px; cursor:pointer; }

JS

show_eform();

function show_eform(){
    $('#eform').fadeIn('fast');
}

function hide_eform() {
    $('#eform').fadeOut('fast');
    $(".toggle_form").hide();
}

$(".toggle_form").click(function() {
    $('#eform').slideToggle('fast');
});

$(".hide_form").click(function() {
    hide_eform();
});

Answer 3

document.getElementById('eform').style.visibility = 'visible';

使用此行直接显示div，只需删除该行，只需淡入淡出和淡出功能，您也无需在动画结束时设置可见性。

Div不会第一次使用jQuery褪色？

3 个答案: