jQuery的上单击动画第一次点击后只发生 [英] jQuery on click animation only happens after first click

问题描述

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

I have a very odd problem that i cant seem to crack, I have sliding divs like in y previous question. Now I am trying to implement a auto height feature, so far it works perfectly, the only problem i am facing is that it only animate the height of the wrapper after the first initial click.

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

So Basically, if you click any link the first time, the height just kind of snaps in place, but after that anything you click animates the height perfectly.

最后是IE8浏览器我不得不遗憾的是支持，然后点击时在div扩展超高然后就弹回至其注定的。

And finally IE8 is a browser i have to unfortunately support, and then when clicked the div expands super high and then just snaps back to where its meant to be.

的jsfiddle 演示

这里是code：

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

任何帮助将是非常美妙的。

Any Help Would be Fantastic.

推荐答案

破解：

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

这篇关于jQuery的上单击动画第一次点击后只发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！