Всплеск страницы (не моя идея), используя jQuery для постепенного исчезновения / выхода перед переходом на первую реальную страницу сайта

Question

Я нахожусь в завершающей стадии создания сайта, и клиенту нужна страница-заставка. Мой не вопрос, почему мой должен получать оплату и летать...

Итак, вот последовательность событий, которую я ищу:

Заставка открывается. Логотип исчезает. Используйте клики для входа. Логотип исчезает. Открывается первая "настоящая" страница сайта.

У меня есть первые три мероприятия и четвертое. Это заставляет логотип исчезать перед открытием первой реальной страницы.

Вот что у меня есть:

<div class="logo_container link" data="commercials.php">
<img src="images/logo_intro.jpg" alt="intro" />
</div>

<script type="text/javascript">

$(function() {

    $('.logo_container').hide();

    $('.logo_container').fadeIn(1000);

   $(".link").click(function(e) {
        $('.logo_container').fadeOut(1000);
        window.location = $(this).attr("data");
    });
});

</script>

</div>

Но я не получаю исчезновение. Это просто переход к атрибуту, вызываемому в window.location, который является commercials.php.

Answer 1

Ты должен использовать window.location в вашем методе обратного вызова вот так:

$(".link").click(function(e) {
        $('.logo_container').fadeOut(1000, function(){
           window.location = $(this).attr("data");
        }); 
});

иначе window.location будет вызван одновременно с событием исчезновения

Answer 2

Вам нужно использовать обратный вызов, чтобы увидеть, когда fadeOut завершился.

Пример из документации:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

Заменить полную строку анимации на window.location = $(this).attr("data");

Answer 3

window.location обновляется сразу после запуска fadeOut, поэтому вы никогда не увидите его. Задержка смены .location с помощью метода, подходящего для вашей среды (например, в MooTools это будет цепочка - я не знаю jquery), или просто запланируйте его на 1000 мс в будущем, используя стандарт setTimeout(),