单击后,滚动到jQuery中的滑动后滚动到元素
题
我正在寻找如何滚动到这样的下一个元素:
单击那些大写字母,然后在单击并滑动效果后确实滚动到当前元素。
有我的尝试:( jsfiddle: http://jsfiddle.net/d272p/)
html
<div id="head1">Click</div>
<div id="child1">Content</div>
<br/>
<div id="head2">Click</div>
<div id="child2">Content</div>
<br/>
<div id="head3">Click</div>
<div id="child3">Content</div>
CSS
#head1{width: 400px; height: 40px; background: orange;}
#head2{width: 400px; height: 40px; background: red;}
#head3{width: 400px; height: 40px; background: purple;}
#child1{width: 300px; height: 700px; background: green; display: none;}
#child2{width: 300px; height: 700px; background: cyan; display: none;}
#child3{width: 300px; height: 700px; background: pink; display: none;}
JavaScript
$('#head1').click(function() {
$('#child1').animate({
opacity: 'toggle',
height: 'toggle'
},
{
duration: 750,
specialEasing: {
width: 'linear',
height: 'easeInOutQuad'
},
}
);
});
$('#head2').click(function() {
$('#child2').animate({
opacity: 'toggle',
height: 'toggle'
},
{
duration: 750,
specialEasing: {
width: 'linear',
height: 'easeInOutQuad'
},
}
);
});
$('#head3').click(function() {
$('#child3').animate({
opacity: 'toggle',
height: 'toggle'
},
{
duration: 750,
specialEasing: {
width: 'linear',
height: 'easeInOutQuad'
},
}
);
});
解决方案
其他提示
可以通过使用jQuery手风琴实现此功能
不隶属于 StackOverflow