Question

我知道这可能听起来像一个基本问题，但事实是我不是一个有动画的专家，而且很难从x和y计算数学。所以，我想知道如何使“gl_banner”div在0.5-1秒之后简单地向上滑动并消失，并且它下面的内容将被推到其原始位置。我使用什么css属性？ CSS动画？过渡？我该怎么做？

P.S。我做了一些关于动画的研究，我看了很多动画，高级动画，但找不到简单的幻灯片动画。一点帮助表示赞赏！谢谢！

HTML CODE：

<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>

JavaScript代码：

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

玩得开心（：

如何使div动画向上滑动并消失？

2 个答案: