jQuery fade making page jump

Question

По какой-то причине fadeIn jQuery делает мою страницу прыгающей вверх. Каждый разный div, который он затухает, заставляет полосу прокрутки менять размер, поэтому я думаю, что это может быть причиной того, что «return false» не работает. Вот код:

jQuery(document).ready(function($) { 

//When page loads... 
$(".tab_content").hide(); //Hide all content 
$("ul.tabs li:first").addClass("active").show(); //Activate first tab 
$(".tab_content:first").show(); //Show first tab content 

//On Click Event 
$("ul.tabs li").click(function() { 

    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn('slow', function() { 
    $(this).show(); }); 
return false 
}); 
}); 

Я был бы признателен, если бы кто-нибудь мог помочь. Вот сайт:

www.matthewruddy.com/demo

Это вкладками ссылки выше основного содержания. Каждый из них уходит в пятерку постов из этой категории.

Заранее благодарен. Мэтью.

Answer 1

Еще один полезный совет, более того, когда есть ссылка на ссылку <noscript>, вы можете вернуть false, когда ваш скрипт закончил выполнение return false;. Это прекращает выполнение действия по умолчанию для ссылки, т. Е. Переход на href. Для браузеров без JS пользователь будет перенаправлять на URL как обычно.

Answer 2

Проблема не в ссылках, хотя я понимаю, что это первая мысль, это сам переход.

На долю секунды (один кадр, 13 мс, чтобы быть точным, между шкурой и первым кадром замирания в) не существует не содержание в области вкладка панели идут, поэтому страница прокручивается вверх, потому что документ был короче.

Чтобы избежать этого, вам необходимо предотвратить уменьшение размера документа, к счастью для вашей конкретной страницы, что довольно просто. Просто измените это:

<div class="tab_container"> 

к этому:

<div class="tab_container" style="height: 516px;"> 

Или дать ему внешний CSS:

.tabs_container { height: 516px; } 

Это предотвратит .tab_content дивы время пошли на этот один кадр изменение размера страницы ,

Answer 3

Вместо возвращения ложным, сделать e.preventDefault() (почему можно найти здесь: http://css-tricks.com/return-false-and-prevent-default/):

$("ul.tabs li").click(function(e) { 
    e.preventDefault() 
    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn('slow', function() { 
    $(this).show(); }); 

}); 

Но проблема не имеет ничего общего с возвращением ложным, потому что связь не последовало. Проблема в том, что вы скрываете текущее содержимое вкладки, а затем исчезаете в новом. Это приводит к изменению высоты вашего тела, поэтому полоса прокрутки становится короче, потому что старый контент скрыт, и вы попадаете на вершину. Вы можете попытаться получить текущую высоту div, высоту содержимого, которое будет загружено, и динамически изменять высоту div.

Answer 4

Вы не можете использовать fadeTo вместо fadeIn. Например:

//Hide all content 
$(".tab_content").hide(); 
//Activate first tab 
$(".TabsScheda li:first").addClass("active").show(); 
//Show first tab content 
$(".tab_content:first").show(); 

//On Click Event 
$(".TabsScheda li").click(function() { 
    //Remove any "active" class 
    $(".TabsScheda li").removeClass("active"); 
    //Add "active" class to selected tab 
    $(this).addClass("active"); 
    //Hide all tab content 
    $(".tab_content").fadeTo("slow", 0); 
    //Find the href attribute value to identify the active tab + content 
    var activeTab = $(this).find("a").attr("href"); 
    //Fade in the active ID content 
    $(activeTab).fadeTo("slow", 1); 
    return false; 
} 

Answer 5

Я думаю, что использование fadeTo гораздо чище, чем решение назначая высоты с помощью CSS. Таким образом, вам не нужно беспокоиться о высоте содержимого, которое вы меняете или выпадаете.

Пример с постепенным исчезновением некоторого содержимого и затуханием данных, передаваемых в функцию (например,в результате вызова ajax):

Обратите внимание, что вы должны использовать fadeTo для постепенного исчезновения содержимого (в отличие от просто fadeIn), чтобы вернуть непрозрачность к чему-то видимому.

function swapData(data) 
{ 
    sel = '#tab_container'; 
    $(sel).fadeTo(50, 0.10, function() { $(sel).html(data).fadeTo(300, 1) }); 
}