当我点击任何年份栏目(2012年,2011年,2010年等)时,它会显示每年的内容并隐藏其他年份。
问题是,当我点击(例如2011年专栏)时,动画会同时混淆用户的所有效果,我想我必须用动画步骤来做,但我还没能来到jquery解决方案。
这是我的代码:
/* Scroll Function */
function scrollto(position){
$('html, body').stop().animate({
scrollLeft: position
}, 1000);
}
/* Calendar Scroll */
$(".sub_section_title").click( function(e) {
e.preventDefault();
$(".contenido_calendario").hide();
$(this).next(".contenido_calendario").toggle('slow');
scrollto($(this).offset().left - 352)
});
我尝试使用.queue()来修复效果,但它不起作用,我不知道代码是否写得很好:
$(".sub_section_title").click( function(e) {
e.preventDefault();
$(".contenido_calendario").hide();
$(".contenido_calendario").queue(function() {
scrollto($(this).offset().left - 352);
$(this).dequeue();
});
$(".contenido_calendario").queue(function() {
$(this).next(".contenido_calendario").toggle('slow')
$(this).dequeue();
});
});
动画应该是: 点击2011> Scroll 2011列左侧(隐藏2012内容)>显示内容动画
答案 0 :(得分:2)
您希望利用jQuery动画的回调功能。因此,对于hide,您可以这样做:
var outerContainer = $(this);
$(".contenido_calendario").hide(500, function() {
outerContainer.next(".contenido_calendario").toggle('slow', function() {
scrollto(outerContainer.offset().left - 352);
});
});
这将确保动画在前一个动画完成时运行。