Как я могу постепенно появляться и исчезать между двумя содержимым на одной странице с помощью javascript?

Я разрабатываю страницу в JSP. Он состоит из 3 компонентов: хедер, контент и футер. Я хочу, чтобы, когда эта страница загружается, часть содержимого должна исчезать с содержимым по умолчанию, то есть с домашней страницей, которая содержит кнопку для регистрации, входа в систему и кредитов сайта. Когда пользователь нажимает кнопку регистрации, содержимое в части содержимого должно исчезать и исчезать, а затем содержимое формы регистрации должно исчезать и отображаться. То же самое для других кнопок, но не должно быть никаких изменений в верхнем и нижнем колонтитулах. Пожалуйста помоги!!!


javascript animation jsp fade
person Aishwarya Shiva    schedule 16.01.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

С использованием jQuery... У вас есть рабочий пример здесь...

person PrimosK    schedule 16.01.2012
comment
Спасибо PrimosK, это то, что я действительно хотел :) - person Aishwarya Shiva; 16.01.2012

arrow_upward
0
arrow_downward

Я бы рекомендовал использовать библиотеку JavaScript для достижения этой цели.

В jQuery есть встроенные возможности затухания.

<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
      });
    });
person Peter Bridger    schedule 16.01.2012
comment
Спасибо, Питер, за этот исчезающий код и ссылку API jQuery, но мой главный вопрос заключается в том, как изменить содержимое HTML-страницы с помощью javascript, когда пользователь что-то щелкает. Например, как я объяснял ранее, когда пользователь нажимает кнопку регистрации, он должен измениться, чтобы зарегистрировать содержимое, но только один ‹div›, другие div должны оставаться неизменными, а во-вторых, когда пользователь нажимает кнопку «Назад», он должен снова измениться на предыдущее содержимое DIV без изменений в других div. или без перезагрузки страницы. И при изменении контента он должен исчезать. Надеюсь, я смог правильно объяснить, так как мой английский слабоват;) - person Aishwarya Shiva; 16.01.2012

arrow_upward
0
arrow_downward

Используя JQuery, вы можете скрыть div, используя селектор и метод hide(). Например:

<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, вы сможете найти дополнительные примеры и обширную документацию. Также для постепенного появления/исчезновения.

person StevenLooman    schedule 16.01.2012