предыстория: Я разрабатываю портфолио для себя. на своей домашней странице логотип находится спереди и в центре, а на дополнительных страницах логотип - сверху и справа.
Я думал, что это будет приятная визуальная подсказка (при нажатии ссылки на вспомогательную страницу), чтобы использовать jQuery для анимации движения логотипа с середины на угол страницы.
проблема: подстраница загружается быстрее, чем завершается анимация.
вопрос: есть ли способ приостановить ссылку после завершения анимации?
Вам также нужно вернуть false или предотвратить действие по умолчанию для события привязки, иначе браузер будет следовать за href. Во всяком случае согласился, что живое демо лучше 1000 слов.
например
$('#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');
});
});
Вы можете использовать функцию анимации, перечисленную здесь: (jquery doc)
В нем говорится, что обратный вызов не должен выполняться до завершения анимации.
callback (необязательно) Функция
Функция, которая будет выполняться всякий раз, когда анимация завершается, выполняется один раз для каждого анимированного элемента.
на всякий случай, если кто-то заинтересован в этом варианте...
Мне хотелось, чтобы сама ссылка была отделена от анимированного изображения, я немного потрудился с кодом, и теперь у меня это работает.
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>");
который сказал, я, вероятно, уродливый код. так что мои извинения там.
Не нужно писать какие-либо функции, просто используйте встроенный метод события jQuery event.preventDefault() (возможно, это было недоступно в момент публикации этого вопроса).
Попробуйте следующее:
$("#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');
});
});
Я знаю, что вы, вероятно, не хотите это слышать, но то, что вы делаете, - это большой нет-нет в плане удобства использования.
Вы хотите создать классный эффект и тем самым замедлить работу пользователя. В настоящее время посетители сети очень заняты, и когда они нажимают на ссылку, они хотят попасть туда как можно скорее. Вы потеряете процент посетителей в процессе и усугубите многие другие только ради небольшой визуальной конфеты.
просто вернуть false в функцию обратного вызова.
Не каждый сайт такой же. На сайте с портфолио - вполне приемлемо иметь небольшие анимации и интерфейс "круто", на инструменте, таком как поиск Google, если логотип каждый раз анимирован, прежде чем мы сможем использовать панель поиска, он будет запаздывать.