0

我想让一个 div 淡入onClick，并在单击 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()">
4

3 回答 3

0

试试这个

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;
于 2012-11-13T18:00:47.030 回答
0

这是一个可以帮助您理解淡入/淡出和切换功能的小提琴：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();
});
于 2012-11-13T18:05:49.340 回答
0 
document.getElementById('eform').style.visibility = 'visible';

使用这一行，您可以直接显示 div，因此只需删除该行并仅使用淡入和淡出功能，您也不需要在动画结束时设置可见性。

于 2012-11-13T18:17:44.670 回答