Question

我有一个非常奇怪的问题，我似乎无法破解，我在y previous question中有滑动div。现在我正在尝试实现一个自动高度功能，到目前为止它完美地工作，我面临的唯一问题是它只在第一次初始点击后设置包装器的高度动画。

所以基本上，如果你第一次点击任何链接，那么高度只是卡在适当的位置，但在那之后你点击任何东西都会完美地为高度设置动画。

最后IE8是一个我不得不支持的浏览器，然后点击时div会超高，然后快速回到原来的位置。

以下是代码：

HTML：

<nav>
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>
</nav>
<div class="wrapper">

    <div id="page-1" class="page">
        <div class="page-container">
            <h3>page 1</h3>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
    <div id="page-2" class="page">
        <div class="page-container">
            <h3>page 2</h3>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
    <div id="page-3" class="page">
        <div class="page-container">
            <h3>page 3</h3>
            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
</div>

CSS：

html, body {
            height: 100%;
            margin: 0;
            overflow-x:hidden;
            position:relative;
        }
        nav{
            position:absolute;
            top:0; left:0;
            height:30px;
        }
        .wrapper {
            background: #263729;
        }
        .page {
            float:left;
            background: #992213;
            min-height: 100%;
            padding-top: 30px;
        }
        #page-1 {
            background: #0C717A;
        }
        #page-2 {
            background: #009900;
        }
        #page-3 {
            background: #0000FF;
        }
        a {
            color:#FFF;
        }
        a.selected{
            color: red;
        }

JavaScript的：

jQuery(document).ready(function () {
    var pages = jQuery('.page'),
        wrapper = jQuery('.wrapper'),
        menuItems = jQuery('a.scrollitem'),
        wrapperWidth = 100 * pages.length,
        slideWidth = 100/pages.length;

    jQuery.each(pages, function (index, value) {
        var page = jQuery(this);
        var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
        pageContainer.data('originHeight', page.outerHeight());
    });

    wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
    pages.width(slideWidth + '%');

    menuItems.click(function(){
        var menuItem = jQuery(this),
            page = jQuery(menuItem.attr('href')),
            pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
            height = pageContainer.data('originHeight'),
            slideNumber = page.index('.page'),
            margin = slideNumber * -100 + '%';

        menuItems.removeClass('selected');
        menuItem.addClass('selected');

        wrapper.animate({marginLeft: margin, height: height},{
            duration: 1000,
            start: function () {
                page.animate({height:height},1000);
            },
            complete: function () {
                pages.css({height:1,overflow:'hidden'});
                jQuery(this).css({height:'auto'});
                page.css({height:'auto',overflow:''});
            }
        });
        return false;
    });
});

任何帮助都会很棒。

Answer 1

裂纹：

http://jsfiddle.net/ugZST/2/

添加

page.css("height", 1);

在为页面设置动画之前

jQuery(document).ready(function () {
    var pages = jQuery('.page'),
        wrapper = jQuery('.wrapper'),
        menuItems = jQuery('a.scrollitem'),
        wrapperWidth = 100 * pages.length,
        slideWidth = 100/pages.length;

    jQuery.each(pages, function (index, value) {
        var page = jQuery(this);
        var pageContainer = jQuery('#'+page.attr('id')+' > .page-container');
        pageContainer.data('originHeight', page.outerHeight());
    });

    wrapper.css({width:wrapperWidth + '%', height:'auto', marginLeft:0});
    pages.width(slideWidth + '%');

    menuItems.click(function(){
        var menuItem = jQuery(this),
            page = jQuery(menuItem.attr('href')),
            pageContainer = jQuery('#'+page.attr('id')+' > .page-container'),
            height = pageContainer.data('originHeight'),
            slideNumber = page.index('.page'),
            margin = slideNumber * -100 + '%';

        menuItems.removeClass('selected');
        menuItem.addClass('selected');

        page.css("height", 1);
        wrapper.animate({marginLeft: margin, height: height},{
            duration: 1000,
            start: function () {
                page.animate({height:height},1000);
            },
            complete: function () {
                pages.css({height:1,overflow:'hidden'});
                jQuery(this).css({height:'auto'});
                page.css({height:'auto',overflow:''});
            }
        });
        return false;
    });
});

Answer 2

试试这个Fiddle

我刚在init期间添加了这一行：

pages.css({height: $(pages[0]).height()});

<强>更新

只需将1设置为complete的非活动网页的高度为Fiddle

if (!$('a.scrollitem[href="' + '#' + page.attr('id') + '"]').hasClass('selected')) 
    page.css({height: 1});

Answer 3

我认为发生的事情是第二个div似乎＆＃34; pop＆＃34;单击导航链接时打开，因为此div的高度未在开始时显式设置，并且此div中的渲染内容仅占用该高度，使div高。一旦通过动画显式设置此div的高度，该问题就不再存在，因为div上的显式CSS高度声明会覆盖此问题。例如，请注意当您点击＆＃34;第3页＆＃34;你看到第二个div＆＃34; pop＆＃34;打开，但当时高度动画似乎在页面3 div上工作。我认为您需要提前在页面容器div上明确设置高度，可以通过CSS，也可以在点击处理程序的开头（可能使用一些overflow-y: hidden？），并可能解决任何问题可能会导致你的JS高度计算。

Answer 4

你对包装器css的js初始化似乎是错误的。替换为

wrapper.css({width:wrapperWidth + '%', marginLeft:0,height:pages.first().outerHeight()});

这适合我。

添加你的css

.wrapper {
   background: #263729;
   overflow-y: hidden
}

这很顺利

单击动画上的jQuery仅在首次单击后发生

4 个答案: