пвсевдо аякс для перезагрузки страниц на сайте

#1 4 августа 2012 в 09:14
Привет сообщество..
Для одного проекта нужно сделать пвсевдо аякс для перезагрузки страниц на сайте
То есть с эффектом затухания и появления при переходе ото одной странице к другой
Цена и срок
#2 4 августа 2012 в 10:08
решение вот такое

  1.  
  2. $("#mask").css("display", "block");
  3. $("#mask").fadeOut(1000);
  4.  
  5. $("a").click(function(event){
  6. event.preventDefault();
  7. linkLocation = this.href;
  8. $("#mask").fadeIn(1000, redirectPage);
  9. });
  10.  
  11. function redirectPage() {
  12. window.location = linkLocation;
  13. }
  14.  
ну и сам блок
  1. <div id="mask" style="position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; background-color: #bbb; z-index: 20;"></div>
#3 4 августа 2012 в 10:16
второй вариант:
1. нужно исправить стили для body
  1. body { display: none; }
2. делаем инициализацию джиквери и показываем нашу страницу при загрузке
  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4. $("body").css("display", "none");
  5. $("body").fadeIn(2000);
  6. });
  7. </script>
  8.  
в скрипте 2000 это 2 сек. можно эксперементировать с этим значением.

Теперь осталось добавить событие для ссылок чтобы сделать переходы. и в конечном счете наш скрипт немного видоизменится и примет вот такой законченный вариант.

  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4. $("body").css("display", "none");
  5.  
  6. $("body").fadeIn(2000);
  7.  
  8. $("a.transition").click(function(event){
  9. event.preventDefault();
  10. linkLocation = this.href;
  11. $("body").fadeOut(1000, redirectPage);
  12. });
  13.  
  14. function redirectPage() {
  15. window.location = linkLocation;
  16. }
  17. });
  18. </script>
  19.  
Финальный штрих добавим темный фон для html
  1.  
  2. html {
  3. /*используйте этот цвет, если у Вас фон черный или около того*/
  4. background-color: #000000;
  5. }
  6.  
#4 4 августа 2012 в 10:43
Макс спасибо!
Можно расписать для чайников по пунктно что куда в какие файлы:)
#5 4 августа 2012 в 10:45
Все написал в блоге даже поставил демку.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.