Làm mờ trang nhảy của jQuery

Question

Vì một số lý do, tính năng fadeIn của jQuery đang làm cho trang của tôi nhảy lên trên cùng. Mỗi div khác nhau mà nó biến mất làm cho thanh cuộn đi một kích thước khác nhau vì vậy tôi nghĩ rằng đây có thể là lý do tại sao 'return false' không hoạt động. Đây là mã:

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 
}); 
}); 

Tôi sẽ đánh giá cao nếu có ai có thể giúp đỡ. Đây là trang web:

www.matthewruddy.com/demo

Đó là các liên kết tab phía trên nội dung chính. Mỗi người mất dần trong năm bài đăng hàng đầu từ danh mục đó.

Xin cảm ơn trước. Matthew.

Answer 1

Một mẹo hữu ích khác, vì vậy khi có địa chỉ <noscript> cho liên kết, bạn có thể trả về false khi tập lệnh của bạn đã hoàn tất việc thực hiện return false;. Thao tác này sẽ dừng hành động mặc định của liên kết đang được thực hiện, tức là đi đến href. Đối với các trình duyệt không có JS, người dùng sẽ chuyển hướng đến url như bình thường.

Answer 2

Vấn đề không liên quan gì đến các liên kết, mặc dù tôi hiểu đó là suy nghĩ đầu tiên, chính bản thân nó là sự chuyển đổi.

Đối với một giây thứ hai (một khung, 13ms chính xác, giữa ẩn và khung đầu tiên mờ dần) có không có nội dung trong khu vực các tab tab, do đó trang cuộn lên vì tài liệu ngắn hơn.

Để tránh điều này, bạn cần phải ngăn chặn tài liệu nhận được bất kỳ nhỏ hơn, may mắn cho trang cụ thể của bạn là khá dễ dàng. Chỉ cần thay đổi này:

<div class="tab_container"> 

Để này:

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

Hoặc cho nó CSS ​​bên ngoài:

.tabs_container { height: 516px; } 

Điều này sẽ ngăn chặn sự .tab_content divs được đi cho rằng một khung hình từ thay đổi kích thước trang .

Answer 3

Thay vì trả lại sai sự thật, làm e.preventDefault() (tại sao có thể được tìm thấy ở đây: 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(); }); 

}); 

Nhưng vấn đề không có gì để làm với sự trở lại sai, vì liên kết không phải là theo sau. Vấn đề là bạn ẩn nội dung tab hiện tại, và sau đó mờ dần trong cái mới. Điều này dẫn đến việc thay đổi chiều cao của cơ thể để thanh cuộn trở nên ngắn hơn vì nội dung cũ bị ẩn khiến bạn bật lên trên cùng. Bạn có thể cố gắng để có được chiều cao hiện tại của div, chiều cao của nội dung sẽ được tải và thay đổi chiều cao của div động.

Answer 4

Bạn không thể sử dụng fadeTo thay vì fadeIn. Ví dụ:

//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

Tôi nghĩ rằng việc sử dụng fadeTo là giải pháp sạch hơn nhiều so với chỉ định chiều cao thông qua CSS. Bằng cách đó bạn không phải lo lắng về chiều cao của nội dung bạn đang trao đổi trong hoặc ngoài.

Ví dụ về việc làm mờ dần một số nội dung và làm mờ dần dữ liệu được chuyển vào hàm (ví dụ:do kết quả của cuộc gọi ajax):

Lưu ý rằng bạn phải sử dụng fadeTo để làm mờ nội dung ngược lại (trái ngược với chỉ fadeIn) để trả về độ mờ cho nội dung hiển thị.

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