Добрый день! Уважаемые яваскриптеры!
Не смотря на то, что активно изучаю сей язык, пока недостаточно знании и опыта. Вот и застопорился в прикрутке одного эффекта.
В общем, есть скрипт скроллинга (горизонтального, вертикального, диагонального), работающего c jQuery UI - сам по себе скрипт работает отлично. Ниже его код:
spScrollToHash = {
scroll: function(id,speed,typ){
if(id=='' || id=='#' || $(id).length==0) return false;
if(speed==undefined || speed<1 || speed>1000) speed = 1000;
if(typ==undefined || typ<1 || typ>3) typ = 3;
var par = 'html'
if($.browser.safari) par = 'body';
var offset = $(id).offset();
spScrollToHash.stop();
switch(typ){
case 1:
$(par).animate({scrollTop:offset.top,scrollLeft:offset.left},speed,function(){document.location.hash=id;});
break;
case 2:
$(par).animate({scrollTop:offset.top},Math.round(speed/2),function(){
$(par).animate({scrollLeft:offset.left},Math.round(speed/2),function(){document.location.hash=id;});
});
break;
case 3:
$(par).animate({scrollLeft:offset.left},Math.round(speed/2),function(){
$(par).animate({scrollTop:offset.top},Math.round(speed/2),function(){document.location.hash=id;});
});
break;
}
return false;
},
stop: function(){
$('a[href*="#"]').stop();
},
ready: function(speed,typ){
var id = document.location.hash;
spScrollToHash.scroll(id,speed,typ);
$('a[href*="#"]').click(function(){
id = $(this).attr('href');
id = id.substr(id.indexOf('#'));
spScrollToHash.scroll(id,speed,typ);
return false;
});
}
}
$(function(){
spScrollToHash.ready(1000,3);
});
Собственно, при клике по якорной ссылке происходит плавное перемещение в нужном направлении по телу страницы к тегу с соответствующим id.
Мне необходимо, чтобы после клика,
до момента перемещения происходило действие:
$("div#test_1").hide("slide", { direction: "up" }, 500);
$("div#test_2").hide("slide", { direction: "down" }, 500);
т.е. один блок уезжает наверх, второй вниз и только после этого происходит скроллинг.
Далее, после завершения скроллинга необходимо вернуть те два блока в исходное положение выполнив действие:
$("div#test_1").show("slide", { direction: "up" }, 500);
$("div#test_2").show("slide", { direction: "down" }, 500);
Получается: обработка клика и hide - scroll - show. Пока что у меня получалось только одновременное выполнение и слайда и скроллинга. Не знаю в каком направлении пытаться, то ли задержку действи производить, то ли как.
Возможно, кто-то сможет помочь?
Спасибо.