jQuery淡入淡出效果会导致页面跳动

Question

由于某些原因，jQuery的fadeIn使我的页面跳转到顶部。每个不同的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

它是主要内容上方的选项卡链接。每个选项卡会淡入该类别中前五篇文章。

提前感谢。马修。

- Matthew Ruddy

Answer 1

问题并不在于链接，虽然我知道这是第一个想到的，而是在于过渡本身。

在隐藏和淡入的第一帧之间（确切地说是13毫秒或一个帧），选项卡面板所在区域存在没有内容的情况，因此页面会向上滚动，因为文档变短了。

为了避免这种情况，您需要防止文档变得更小，幸运的是，对于您特定的页面来说，这非常容易。只需更改以下内容：

<div class="tab_container">

将其变成这样：

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

或者给它添加外部CSS样式：

.tabs_container { height: 516px; }

这将防止 .tab_content div在那一帧被消失时改变页面大小。

- Nick Craver

---

谢谢，我有点明白你的意思，但我无法定义 div 的高度，因为在主题管理选项页面中，用户可以定义显示多少个条目。目前它已经被设置为固定值，但是用户可以将其设置为更多或更少，从而改变高度。 - Matthew Ruddy

@Matthew - 你可以在每次加载时将其设置为任何值，就像这样： jQuery(".tab_container").height(function(i, h) { return h; }); - Nick Craver

谢谢，这个基本上可以工作了，但是有没有办法获取每个.tab_content的高度？目前当您点击帖子少于5个的不同选项卡时，高度不会改变，因此会有很多空白的空间。无论如何还是非常感谢。 - Matthew Ruddy

还有，在Firefox中淡入时，文本会变成奇怪的颜色。有什么想法吗？ - Matthew Ruddy

@Matthew - 你必须决定你想让它在这里如何运作...如果你不使用一致的高度，当切换标签时页面仍然会跳动（同一文档高度变化问题），你想要发生什么？ - Nick Craver

谢谢。你的回答完美地解决了我遇到的问题。 - Robert Hyatt

Answer 2

您不能使用 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;
}

- Cesar Andavisa

Answer 3

我认为使用fadeTo比通过CSS分配高度更清晰。这样，您就不必担心要交换的内容的高度。

以下是一个示例，其中一些内容淡出并淡入传递到函数中的数据（例如作为ajax调用的结果）：

请注意，您必须使用fadeTo来将内容淡入（而不仅仅是fadeIn），以便将不透明度返回到可见状态。

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

- australis

Answer 4

不要返回 false，而是使用 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(); });

});

但问题与返回 false 无关，因为链接没有被跟踪。问题在于你隐藏了当前选项卡内容，然后淡入新内容。这导致您的 body 高度发生变化，因此滚动条变短，因为旧内容被隐藏会使您弹回到顶部。您可以尝试获取 div 的当前高度、将要加载的内容的高度，并动态修改 div 的高度。

- joggink

---

我该怎么做呢？:P 当涉及到jQuery时，我只是个初学者。 - Matthew Ruddy

Answer 5

另一个有用的提示，特别是当链接有<noscript> url时，你可以在脚本执行完毕后返回false return false;。这将停止执行链接的默认操作，即跳转到href。对于没有JS的浏览器，用户将像往常一样重定向到URL。

- BIGDeutsch