2013-07-29 2 views
1

Использование jQuery исчезает и исчезает, я хочу, чтобы моя текущая страница исчезла, когда выбрана ссылка на панели навигации, а затем я хочу, чтобы новая страница затухала. Я не могу получить ожидаемый эффект.Как достичь jQuery, исчезают и исчезают?

Вот мой код:

$(document).ready(function() { 
    $('body').css('display', 'none'); 
    $('body').fadeIn(2000); 

    $('a').click(function() { 
    event.preventDefault(); 
    newLocation = this.href; 
    $('body').fadeOut(2000, newpage); 
    }); 

    function newpage() { 
    window.location = newLocation; 
    } 
}); 
+0

'fadeOut' происходит на первой странице? 'fadeIn' должен быть в коде цели/следующей страницы? – rps

+0

Вместо использования window.location ознакомьтесь с использованием Ajax для загрузки новой страницы и вставки ее в DOM без обновления полной страницы. Nice и slick: D Вот хороший пример: http://pjax.heroku.com/ – will

+0

Так что же происходит вместо желаемого эффекта? Ваша страница не исчезает? Новая страница не затухает? Страница не перемещается в новое место? – freejosh

ответ

0

Попробуйте это:

Давайте навигационная ссылка:

<a href="nextPage.html" class="switch">My LINK</a> 

Тогда ваш код JQuery должен быть:

$(document).ready(function() { 

    $('body').css('display', 'none'); 

    $('body').fadeIn(2000); 

    $('a.switch').click(function(event) { 

     event.preventDefault(); 

     newLocation = this.href; 

     $('body').fadeOut(2000, newpage); 

    }); 

    function newpage() { 

     window.location = newLocation; 

    } 

}); 

Дон Не забудьте поставить ev как аргумент функции.

Надеюсь, это поможет!

+0

Эй, спасибо, но все же с этим, я не получаю эффект угасания на текущей странице, когда я перехожу на новую страницу с текущей страницы, используя ссылку на панели навигации. Эффект Fade работает отлично. Пожалуйста, помогите. Спасибо. – user2494943

+0

Да, fadeOut должен произойти с первой страницы, а fadeIn должен быть в коде цели/следующей страницы. – user2494943

+0

Так что, вероятно, ваша текущая страница либо не имеет тегов '', и если они есть, то она не охватывает всю страницу вообще. Попробуйте обернуть содержимое текущей страницы тегом '', чтобы получить эффект. вы можете по-прежнему указывать имя класса тегу body, например ' My content', а затем использовать: '$ ('body.current_page'). fadeOut (2000, newpage);' –

0

Попробуйте предложение воли. Лучший способ добиться этого - предотвратить полную перезагрузку вашей страницы. Используйте функцию Ajax или .load()! "Описание: Загрузите данные с сервера и поместите возвращенный HTML в соответствующий элемент." После того, как содержимое загружается, увядает его.

0

HTML

<body style="display:none;"> 
content 
</body> 

JS

function redirectPage() { 
    window.location = linkLocation; 
} 


$(document).ready(function() { 

$("body").fadeIn(600); 

$('a').click(function(event) { 
    if (this.href == "" || this.href == null) { 
     event.preventDefault(); 
     return; 
    } 
    if ((this.href.indexOf("#") == -1) && (this.href.indexOf("mailto:") == -1) && (this.href.indexOf("javascript:") == -1) && (this.target != "_blank")) { 
     event.preventDefault(); 
     linkLocation = this.href; 
     $("body").fadeOut(600, redirectPage); 
    } 
    }); 

}); 
+0

Эй, спасибо, но есть еще 4-секундное отставание между переходом страниц. Пожалуйста помоги. Я слышал, что AJAX может решить проблему, но я никогда не реализовал ее, поэтому я не знаю. Пожалуйста, направляйте меня. – user2494943

Смежные вопросы