Плавные переходы jquery

Question

Плавные переходы jquery

0

У меня есть этот javascript, который привносит новый контент и заменяет старый, но переход, в котором он делает это, уродлив, он чувствует себя как обычная ссылка.

$(document).ready(function() {
// initial
$('#content').load('content/index.html');

// handle menu clicks
$('div#nav ul li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.html');

return false;
});
});

Как добавить переход, чтобы сделать мой сайт более жидким?

Я пробовал.fadeIn, но это, похоже, не работает

user3464627 05 май 2014, в 21:41

Источник

1

Вы смотрели на CSS переходы? w3schools.com/css/css3_transitions.asp
creimers 05 май 2014, в 18:44
0

проверьте документацию для jQuery's fadeOut. Вы можете потушить #content и затем загрузить в него что-нибудь, как только fadeOut будет сделан внутри функции обратного вызова
Wryte 05 май 2014, в 18:45
0

как fadeIn не работает для вас? что вы ожидаете от этого?
Ejaz 05 май 2014, в 18:46
0

Если вы хотите посмотреть на переходы CSS, используйте официальную спецификацию вместо w3schools. w3.org/TR/css3-transitions
Cedric Reichenbach 05 май 2014, в 18:47

Показать ещё 2 комментария

Теги:

jquery

html

2 ответа

Ещё вопросы

Вы смотрели на CSS переходы? w3schools.com/css/css3_transitions.asp
проверьте документацию для jQuery's fadeOut. Вы можете потушить #content и затем загрузить в него что-нибудь, как только fadeOut будет сделан внутри функции обратного вызова
как fadeIn не работает для вас? что вы ожидаете от этого?
Если вы хотите посмотреть на переходы CSS, используйте официальную спецификацию вместо w3schools. w3.org/TR/css3-transitions

Amit Soni · Answer 1 · 2014-05-05T15-53-00.000Z

попробуй это

$('#content').fadeOut('fast',function(){
        var $this = $(this);
        $this.load('content/' + page + '.html',function(){
             $this.fadeIn('fast');
        });
});

Так как я думаю, что .load выполняется асинхронно, вы можете поместить fadeIn в функцию обратного вызова для .load, чтобы она возвращалась только после завершения загрузки контента.
следует использовать обратный вызов для загрузки как .fadeIn после загрузки не гарантирует, что вызов ajax завершен
Сделал JSFiddle, чтобы продемонстрировать ваш ответ

John Hartsock · Answer 2 · 2014-05-05T16-38-00.000Z

Для этого я использовал бы все обратные вызовы методов.fadeOut() и .load().

Примечание. Использование полной функции на.fadeOut() не требуется, но это гарантирует, что вы не начнете загружать контент, пока элемент не будет полностью удален с сайта. Это будет продолжаться от странного мерцания, когда вызов AJAX вернется очень быстро

var $content; 
$(document).ready(function() {
  $content = $('#content');
  // initial
  $content.fadeOut("slow", function() {
    $content.load('content/index.html', function() {
      $content.fadeIn("slow");
    });
  })


  // handle menu clicks
  $('div#nav ul li a').click(function() {
    var page = $(this).attr('href');
    $content.fadeOut("slow", function() {
      $content.load('content/' + page + '.html', function() {
        $content.fadeIn("slow");
      });
    })

    return false;
  });
});

Теперь немного больше, чтобы упростить работу с вашим кодом.

var changeContent = function(page) {
  var $content = $(content);
  $content.fadeOut("slow", function() {
    $content.load('content/' + page + '.html', function() {
      $content.fadeIn("slow");
    });
};

$(document).ready(function() {
  changeContent("index");

  // handle menu clicks
  $('div#nav ul li a').click(function() {
    changeContent($(this).attr('href'));        
    return false;
  });
});