Как остановить переход по ссылке до тех пор, пока не завершится jQuery .animate? - PullRequest
Новая
       10

Как остановить переход по ссылке до тех пор, пока не завершится jQuery .animate?

10 голосов
/ 09 декабря 2008

История вопроса: Я занимаюсь созданием портфолио для себя. на главной странице логотип находится спереди и по центру, а на подстраницах логотип - сверху и справа.

Я подумал, что будет хорошей визуальной подсказкой (после нажатия на ссылку на подстраницу) использовать jQuery для анимации движения логотипа от середины к углу страницы.

проблема: подстраница загружается быстрее, чем анимация завершается.

вопрос: есть ли способ приостановить переход по ссылке до окончания анимации?

Ответы [ 8 ]

31 голосов
/ 09 декабря 2008

Вам также нужно вернуть false или запретить действие по умолчанию для события щелчка якоря, иначе браузер просто будет следовать href В любом случае согласился, что живое демо лучше, чем 1000 слов.

Смотрите демонстрацию здесь

1007 * например * 

 $('#myLink').click( function(ev){
   //prevent the default action of the event, this will stop the href in the anchor being followed
   //before the animation has started, u can also use return false;
   ev.preventDefault();
   //store a reference to the anchor tag
   var $self=$(this);
   //get the image and animate assuming the image is a direct child of the anchor, if not use .find
   $self.children('img').animate( {height:"10px"}, function(){
       //now get the anchor href and redirect the browser
       document.location = $self.attr('href');
   });
 });
1 голос
/ 27 января 2010

Нет необходимости писать какие-либо функции, просто используйте встроенный метод события jQuery event.preventDefault () (возможно, он не был доступен на момент публикации этого вопроса).

http://api.jquery.com/event.preventDefault/

1 голос
/ 09 декабря 2008

на всякий случай, если кто-то заинтересован в этом варианте ...

я хотел, чтобы сама ссылка была отделена от анимированного изображения , я немного повозился с кодом, и теперь у меня это работает.

JavaScript / JQuery: 

print(" $(function()
    {
        $('#myLink').click( function(ev){
            //prevent the default action of the event, this will stop the href in the anchor being followed
            //before the animation has started, u can also use return false;
            ev.preventDefault();
            //store a referene to the anchor tag
            var $self=$('img#myImage');
            var $link=$('a#myLink');
            //get the image and animate
            ($self).animate( {height:"10px"}, function(){
                //now get the anchor href and redirect the browser
                document.location = $link.attr('href');
            });
        });
    });
");

разметка: 

print("<body>
<a id="myLink" href="http://www.google.co.uk">LINK</a>

<img id="myImage" src="http://www.derekallard.com/img/post_resources/jquery_ui_cap.png"/>
</body>");

, который сказал, я, вероятно, уродлив код. поэтому мои извинения там.

1 голос
/ 09 декабря 2008

Вы должны быть в состоянии использовать функцию анимации, перечисленную здесь: (jquery doc)

В нем говорится, что обратный вызов не должен выполняться до завершения анимации.

обратный вызов (необязательно) Функция
Функция, выполняемая при завершении анимации, выполняется один раз для каждого анимированного элемента.

0 голосов
/ 24 июля 2012

Не все веб-сайты одинаковы. На сайте портфолио - вполне приемлемо иметь небольшие анимации и «крутой» интерфейс на таком инструменте, как поиск в Google, если логотип анимируется каждый раз, когда мы можем использовать панель поиска, он будет задержан.

0 голосов
/ 21 декабря 2011

просто возвращает false в функции обратного вызова.

0 голосов
/ 09 декабря 2008

Я знаю, что вы, вероятно, не хотите этого слышать, но то, что вы делаете, - это просто нет-нет с точки зрения удобства использования.

Вы хотите создать крутой эффект и тем самым замедлить работу вашего пользователя. В настоящее время веб-посетители очень заняты, и когда они нажимают на ссылку, они хотят попасть туда как можно скорее. Вы потеряете процент посетителей в процессе и ухудшите многих других только ради небольшого визуального леденца.

0 голосов
/ 09 декабря 2008

Попробуйте это: 

 $("#thelink").click( function(){
  $(this).animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $(this).attr('href');  
  });
 });

Или когда ссылка не анимированная, а изображение (как говорится в вашем вопросе): 

 $("#thelink").click( function(){
  $("#theImg").animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $("thelink").attr('href');  
  });
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...