jQuery的上单击动画第一次点击后只发生(jQuery on click animation on

我有一个很奇怪的问题，我似乎无法破解，我滑的div像y中前面的问题 。 现在我想实现一个自动高度功能，到目前为止，它完美的作品，我面对的唯一问题是，它只有首字母点击后动画包装的高度。

所以基本上，如果你点击任何链接在第一时间，高度只是种卡的地方，但任何你点击后动画完美的高度。

最后是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;
    });
});

Answer 2:

试试这个小提琴

我刚添加的初始化过程中这一行：

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

更新

就在不活动页面的高度设置为1为complete的功能： 小提琴

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

Answer 3:

我认为发生的事情是，第二次DIV似乎“啪”单击导航链接时，因为这个div的高度没有被明确地在一开始就设定打开，并在此呈现的内容的div只是占用了高度的量，制作的div高。 一旦你明确地通过您的动画设置该div的高度，这个问题不再存在，因为在div的，明确的CSS高度声明覆盖了这个问题。 例如，请注意，当您单击“第3页”你看到的第二个格“弹出”打开，但当时的高度动画似乎在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 on click animation only happens after first click