Jquery Последовательность анимации
Помогите упорядочить анимацию (запуск на маусовер) так чтобы при маусаут (даже если очередь не кончилась и анимация продолжается) происходил стоп текущей и и возврат в начальное положение.
какойто бред непонятный написал) на примере может будет понятней http://zamanpharm.kz/new/main2.php $("#zfad").hover(function(){ $("#zfad_text").stop().animate({left: "80px"}, 50).animate({left: "300px"}, 100); // 1 в очере должен быть $("#zfad_inner").stop().animate({width: "300px"}, 150, function(){ // 1 в очере должен быть $("#zfad_inner").stop().animate({height: "200px", top: "0px", opacity: 0.2}, 300, function(){ // 2 в очере должен быть ("#zfad_inner_text").stop().animate({width: "260px"}, 150).animate({height: "160px"}, 150); // 3 в очере должен быть }); }); },function(){ // в обратном порядке $("#zfad_inner_text").animate({height: "20px"}, 150).animate({width: "0px"}, 150, function(){ // 1 $("#zfad_inner").animate({height: "20px", top: "90px", opacity: 0.1}, 300, function(){ //2 $("#zfad_text").animate({left: "100px"}, 100); //3 $("#zfad_inner").animate({width: "0px"}, 150); //3 }); }); }); <div id="zfad"> <div id="zfad_inner"> <div id="zfad_inner_text"> Мы предлогаем Вам воспользоваться нашим новым Сервисом Электронных Заявок. Заказывайте товар не поднимая трубки в любое время. </div> </div> <div id="zfad_text"> [Заказать] </div> </div> #zfad { -moz-border-radius: 6px; background-color: #a00; border-left: 1px solid #f00; border-top: 1px solid #f00; border-right: 1px solid #600; border-bottom: 1px solid #600; z-index: 97; top: 200px; width: 300px; height: 200px; display: block; position: relative; overflow: hidden; } #zfad_inner { background-color: #000; top: 90px; left: 0; position: absolute; display: block; height: 20px; width: 0px; opacity: 0.1; z-index: 98; } #zfad_text { color: #FFFFFF; display: block; font-family: verdana; font-size: 13px; font-weight: bold; height: 20px; left: 100px; position: absolute; text-align: center; top: 90px; width: 100px; z-index: 99; } #zfad_inner_text { color: #fff; display: block; font-family: verdana; font-size: 13px; font-weight: bold; height: 20px; left: 20px; position: absolute; text-align: left; top: 20px; width: 0px; overflow: hidden; z-index: 99; opacity: 1; } |
qwert_ukg, там даже пример есть ;)
http://jquery-docs.ru/effects/stop/ |
Часовой пояс GMT +3, время: 19:53. |