jQuery淡化使页面跳转 [英] jQuery fade making page jump

问题描述

出于某种原因，jQuery的fadeIn让我的页面跳到了顶部。它淡入的每个不同的div使得滚动条的大小不同，所以我认为这可能就是为什么return false无效。以下是代码：

  jQuery（document）.ready（function（$）{
 
 / /当页面加载时... 
 $（。tab_content）。hide（）; //隐藏所有内容
 $（ul.tabs li：first）。addClass（active） .show（）; //激活第一个标签
 $（。tab_content：first）。show（）; //显示第一个标签内容
 
 //点击活动
 $（ul.tabs li）。click（function（）{
 
 $（ul.tabs li）。removeClass（active）; //删除所有活动类
 $（this）.addClass（active）; //将active类添加到选定的选项卡
 $（。tab_content）。hide（）; 
 var activeTab = $ （this）.find（a）。attr（href）; 
 $（activeTab）.fadeIn（'slow'，function（）{
 $（this）.show（）; }）; 
返回false 
}）; 
}）; 
  

如果有人能提供帮助，我将不胜感激。这是网站：

www.matthewruddy.com/demo

这是主要内容上方的标签链接。每一个都在该类别的前五个帖子中消失。

提前致谢。马修。

解决方案

这个问题与链接没有任何关系，但我知道这是第一个想法，它就是过渡本身。 / p>

对于瞬间（一帧，准确地说是13ms，在隐藏和淡入的第一帧之间），无内容在选项卡面板的区域中，因此页面向上滚动，因为文档较短。

为了避免这种情况，您需要防止文档变小，幸运的是您的特定页面非常简单。只需更改此内容：

 < div class =tab_container> 
  

对此：

 < div class =tab_containerstyle =height：516px;> 
  

或者给它外部CSS：

  .tabs_container {height：516px; } 
  

这将阻止 .tab_content divs通过调整页面大小来消除那一帧。

For some reason jQuery's fadeIn is making my page jump to the top. Each different div it fades in makes the scroll bar go a different size so I think this might be why 'return false' isn't working. Here is the code:

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

I would appreciate if anyone could help out. Here is the site :

www.matthewruddy.com/demo

It's the tabbed links above the main content. Each one fades in the top five posts from that category.

Thanks in advance. Matthew.

解决方案

The issue isn't anything with links, though I understand that's the first thought, it's the transition itself.

For a split second (one frame, 13ms to be exact, between the hide and the first frame of the fade in) there is no content in the area the tab panels go, so the page scrolls up because the document was shorter.

To avoid this you need to prevent the document getting any smaller, luckily for your particular page that's pretty easy. Just change this:

<div class="tab_container">

To this:

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

Or give it external CSS:

.tabs_container { height: 516px; }

This will prevent the .tab_content divs being gone for that one frame from resizing the page.

这篇关于jQuery淡化使页面跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！