单击动画的jQuery只在第一次单击后发生
单击动画的jQuery只在第一次单击后发生
提问于 2014-07-02 13:26:39
我有一个非常奇怪的问题，我似乎无法破解，我有滑动的div，如y 前一个问题。现在我正在尝试实现一个自动高度功能，到目前为止，它工作得很完美，我面临的唯一问题是它只在第一次初始单击之后激活包装器的高度。
因此，基本上，如果你第一次点击任何链接，高度就会在一定程度上被拍下来，但在那之后，你点击的任何东西都能完美地显示出高度。
最后，IE8是我不得不支持的浏览器，当单击div时，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;
});
});任何帮助都会很棒。
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-07-02 13:48:18
破裂：
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;
});
});Stack Overflow用户
发布于 2014-07-02 13:51:48
试试这个小提琴
我刚才在init中添加了这一行：
pages.css({height: $(pages[0]).height()});更新
只需将非活动页的高度设置为1，就像complete所做的：小提琴
if (!$('a.scrollitem[href="' + '#' + page.attr('id') + '"]').hasClass('selected'))
page.css({height: 1});Stack Overflow用户
发布于 2014-07-02 13:42:43
我认为第二个div在点击导航链接时似乎会“弹出”，因为这个div的高度在一开始就没有被显式设置，而这个div中的呈现内容只是占据了这个高度，使得div那么高。一旦您通过动画显式地设置了这个div的高度，这个问题就不再存在了，因为div上显式的CSS高度声明覆盖了这个问题。例如，请注意，当您单击“第3页”时，您会看到第二个div“弹出”打开，但随后的高度动画似乎在第3页上工作。我认为您需要提前显式地设置页面容器div的高度，无论是通过CSS，还是在单击处理程序的开始(可能使用一些overflow-y: hidden?)，并可能修复JS高度计算中可能出现的任何问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24532381
复制相关文章
相似问题
腾讯云开发者
