div 애니메이션 슬라이드를 위로 만들고 사라지게하려면 어떻게해야합니까?

Question

이것이 기본적인 질문처럼 들리 겠지만 진리는 애니메이션 전문가가 아니며 x와 y로부터 수학을 계산하기가 어렵다는 것입니다. 그래서, "gl_banner"div를 0.5-1 초 후에 단순히 움직여 사라지게하는 방법을 알고 싶습니다. 그리고 그 아래의 내용은 원래 위치로 밀려납니다. 어떤 CSS 속성을 사용합니까? CSS- 애니메이션? 전이? 어떻게해야합니까?

P. 애니메이션에 대한 연구를 해본 결과 많은 애니메이션, 고급 애니메이션을 보았지만 간단한 슬라이드로 애니메이션을 찾을 수 없었습니다. 약간의 도움을 주시면 감사하겠습니다! 감사!

HTML 코드 :

<div id="gl_banner" style="display:none; visibility:hidden;">Good Luck! :)</div> 
       <form id="quiz" action="grade.php" method="post" style="visibility:hidden;"> 
        <!--Question 1--> 
        <h3>1. How many percent of modern camera phones use CMOS?</h3> 
        <div> 
         <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" /> 
         <label for="question-1-answers-A">A) 20%</label> 
         <br/> 
         <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" /> 
         <label for="question-1-answers-B">B) 80%</label> 
         <br/> 
         <input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" /> 
         <label for="question-1-answers-C">C) 50%</label> 
         <br/> 
         <input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" /> 
         <label for="question-1-answers-D">D) 90%</label> 
        </div> 
        <!--Question 2--> 
        <h3>2. Which type of camera setting(s) is best for greater control and flexibility in terms of focusing on a subject?</h3> 
        <div> 
         <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" /> 
         <label for="question-2-answers-A">A) Manual Focus</label> 
         <br/> 
         <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" /> 
         <label for="question-2-answers-B">B) Auto Focus</label> 
         <br/> 
         <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" /> 
         <label for="question-2-answers-C">C) Both A and B</label> 
         <br/> 
         <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" /> 
         <label for="question-2-answers-D">D) Neither</label> 
        </div> 
        <!--Question 3--> 
        <h3>3. What are the three properties included in an exposure triangle?</h3> 
        <div> 
         <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" /> 
         <label for="question-3-answers-A">A) White Balance, ISO, Low Light</label> 
         <br/> 
         <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" /> 
         <label for="question-3-answers-B">B) Shutter Speed, Exposure, ISO</label> 
         <br/> 
         <input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" /> 
         <label for="question-3-answers-C">C) Aperture, ISO, Exposure</label> 
         <br/> 
         <input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" /> 
         <label for="question-3-answers-D">D) ISO, Aperture, Shutter Speed</label> 
        </div> 
        <!--Question 4--> 
        <h3>4. The higher the ISO, the more noise it produces in an image.</h3> 
        <div> 
         <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" /> 
         <label for="question-4-answers-A">A) True</label> 
         <br/> 
         <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" /> 
         <label for="question-4-answers-B">B) False</label> 
        </div> 
        <!--Question 5--> 
        <h3>5. What is the name of the smartphone you've seen all over this site?</h3> 
        <div> 
         <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" /> 
         <label for="question-5-answers-A">A) Nokia Pureview 808</label> 
         <br/> 
         <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" /> 
         <label for="question-5-answers-B">B) Nokia Lumia 1020</label> 
         <br/> 
         <input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" /> 
         <label for="question-5-answers-C">C) Nokia Lumia 925</label> 
         <br/> 
         <input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" /> 
         <label for="question-5-answers-D">D) Nokia Lumia 920</label> 
        </div> 
        <br /> 
        <hr style="border-top:1px; border-style:solid; border-color: #000;" /> 
        <input style="cursor:pointer;" type="submit" value="Submit Quiz" /> 
       </form> 

자바 스크립트 코드 :

function takeQuiz() 
{ 
// hide the intro 
document.getElementById('intro').style.display = 'none'; 

// display the quiz 
document.getElementById('quiz').style.visibility = 'visible'; 
document.getElementById('gl_banner').style.display = 'block'; 
document.getElementById('gl_banner').style.visibility = 'visible'; 
} 

Answer 1

사용 jQuery 라이브러리. 예 :

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

$("intro").hide(); //hide div "intro" immd 
$("intro").click(function(event) {//hide div "intro" on click 
    event.preventDefault(); 
    $(this).hide(); 
}); 

$("intro").show(); //to show after hide 

$("intro").fadeOut(); 
$("intro").fadeIn(); 

Answer 2

확인 JQuery와에서 click 기능을 날을 만든 예 :

Knee's Fiddle

---

재밌게 (:. 내가 JQuery와에 대해 아무것도 몰라요