如何使用javascript在同一页面上的两个内容之间淡入和淡出?

时间:2012-01-16 09:53:28

标签: javascript jsp animation fade

我正在JSP中开发一个页面。它有3个组件:标题,内容和页脚。我希望当这个页面加载时,内容部分应该淡入默认内容,即主页,其中包含注册,登录和站点信用按钮。当用户点击注册按钮时,内容部分中的内容应淡出并消失,然后注册表单的内容应淡入并显示。其他按钮也一样,但页眉和页脚不应有任何变化。请帮忙!!!

3 个答案:

答案 0 :(得分:1)

使用jQuery ......你有工作示例there ...

答案 1 :(得分:0)

我建议使用JavaScript库来实现这一目标。

jQuery有built in fading abilities.

<div id="clickme">
      Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />
    With the element initially hidden, we can show it slowly:
    $('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });

答案 2 :(得分:0)

使用JQuery,您可以使用选择器和hide()方法隐藏div。例如:

<html>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script type="text/javascript">
      function swap_divs() {
        $("#div_to_hide").hide();
        $("#div_to_show").show();
      }
   </script>
   <body>
     <div id="div_to_hide">
       Some text for div to hide
     </div>
     <div id="div_to_show" style="display: none;">
       Some text for div to show
     </div>
     <button onClick="swap_divs();">Click me</button>
   </body>
</html>

如果查看JQuery website,可以找到更多示例和大量文档。也用于淡入/淡出。