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 
document.getElementById('eform').style.visibility = 'visible';

この行を使用すると、divが直接表示されるため、行を削除し、フェードインおよびフェードアウト機能だけで、アニメーションの最後に可視性を設定する必要もありません。

于 2012-11-13T18:17:44.670 に答える
0

これを試して

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

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

likedisplay: 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/

フェードイン/フェードアウト/トグル タイプの関数の場合、可視性の状態を設定する必要はありません。それらの関数が処理してくれます。

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 に答える