这是我正在处理的网站:http://www.sircat.net/joomla/sircat/mies/calendari.html
当我点击任何年份栏目(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();
});
});
答案 0 :(得分:1)
只需使用回调函数:
/* Scroll Function */
function scrollto(position){
$('html, body').stop().animate({
scrollLeft: position
}, 1000);
}
/* Calendar Scroll */
$(".sub_section_title").click( function(e) {
e.preventDefault();
var $this = $(this)
$(".contenido_calendario").hide(function(){
$this.next(".contenido_calendario").toggle('slow',function(){
scrollto($(this).offset().left - 352)
});
});
});