Page/Divコンテンツは、クリックしてフェードイン/フェードアウトします

Question

私は数日間、募集Webサイトに取り組んでいます。私はプログラミングの初心者です。 Employment reviewのコンテンツをクリックすると、Employment reviewのコンテンツがクリックされるごとに消えるスクリプトが必要です。また、Employment reviewのコンテンツページの「閉じる」をクリックすると、フェードインします。ありがとう。

Answer 1

次のようなことを達成するためにjqueryのを使用することができます。http://api.jquery.com/fadein/

$("#close-button-id").click(function() { 
    $("#id-of-what-you-want-to-fade-in").fadeIn("slow", function() { 
    // Animation complete 
    }); 
}); 

より詳細な例 - 入れ：これを使用することができますフェードインするにはhttp://api.jquery.com/fadeout/

$("#vacancy-div-id").click(function() { 
    $("#id-of-what-you-want-to-fade-out").fadeOut("slow", function() { 
    // Animation complete. 
    }); 
}); 

をこれはあなたのhtmlで：

<script> 
    $("#close-button-id").click(function() { 
     $("#id-of-what-you-want-to-fade-in").fadeIn("slow", function() { 
     // Animation complete 
     }); 
    }); 
</script> 

fadeInアニメーションをトリガするために何をクリックしたいのかわからない場合は、要素を右クリックしてinspectをクリックすると、ページのhtmlが表示されます。

Answer 2

#start{ 
     height:100px; 
     width:300px; 
     border:3px solid red; 
     display: none; 

    } 
    #start.fadeIn{ 
     display: block; 
     animation-name:fadein; 
     animation-duration:3s; 
    } 
@keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 

document.getElementById('run').addEventListener('click',function(){ 
     document.getElementById('start').classList.toggle('fadeIn'); 
    }) 


<div id="start" class="rotating"> 
      some text some text some text some text some text 
    </div>