javascript - jQuery on click动画只发生在第一次点击之后

Question

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

所以基本上，如果您第一次点击任何链接，高度就会固定到位，但之后您点击的任何内容都会完美地激活高度。

最后，IE8 是我不得不支持的浏览器，但当单击时，div 会扩展得非常高，然后又会快速返回到它应该在的位置。

JSFIDDLE DEMO

代码如下:

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