如何在jQuery .animate完成之後停止鏈接？

背景故事：我正在爲自己設計一個投資組合網站。在其主頁上，徽標是正面和中心，但在子頁面上徽標頂部&正確。如何在jQuery .animate完成之後停止鏈接？

我認爲這將是一個很好的視覺提示（點擊鏈接到一個子頁面）使用jQuery動畫從中間到頁面的角落標誌的運動。

問題：子頁面加載速度快於動畫完成。

問題：有什麼方法可以暫停鏈接 - 跟蹤直到動畫完成後？

來源

2008-12-08 jon

雖然這當然是一個巧妙的技巧......點擊和預期的動作之間的任何等待都會讓用戶感到沮喪。在這種情況下，他們會看到徽標移動，然後注意整個頁面刷新。我知道我會很生氣。 – Sam 2008-12-09 07:01:21

你還需要返回false或阻止默認錨定點擊事件的動作，否則瀏覽器將會跟隨href。無論如何，同意現場演示比1000字更好。

See a live demo here

e.g

$('#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'); 
    }); 
});

來源

2008-12-09 06:55:08 redsquare

您應該能夠使用下列的動畫功能：(jquery doc)

它說，回調不應該被執行，直到動畫完成。

回調（可選）功能
的函數被執行時在動畫完成，對於動畫針對每個元素執行一次。

來源

2008-12-08 23:12:58

試試這個：

$("#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'); 
    }); 
});

來源

2008-12-08 23:13:09

嗨，對不起，但即時通訊相當一個JavaScript/jQuery新手，我不能讓這個部分的答案正面或反面： document.location = $（「thelink」）。attr（'href'）; 我試過了，但似乎並不正確： document.location = $（「http://google.com」）.attr（'href'）; 它有可能給予前？ – jon 2008-12-09 04:01:14

這不會阻止鏈接後的客戶端，除非您阻止默認操作或從點擊處理程序返回false – redsquare 2008-12-09 06:59:31

我知道你可能不希望聽到這一點，但你在做什麼是一個很大的禁忌在可用性方面。

你想創造一個很酷的效果，這樣做會減慢你的用戶體驗。如今，網絡訪問者非常忙碌，當他們點擊鏈接時，他們希望儘快到達那裏。在這個過程中，你將失去一定比例的參觀者，並且會爲了一點點視覺上的糖果而加重其他許多人。

來源

2008-12-09 08:51:15 allesklar

以防萬一有人有興趣在這個變...

我想鏈接本身是從被動畫圖像分開，我的代碼修修補補了一下，現在我有工作。

的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>");

在於所述，我很可能ugly'd起來的代碼。所以我很抱歉。

來源

2008-12-09 18:36:21 jon

無需編寫任何函數，只需使用內置的jQuery事件方法event.preventDefault（）（這可能在發佈此問題時不可用）。

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

來源

2010-01-27 16:01:10 Darrell

只是在回調函數返回false。

來源

2011-12-21 13:59:03 Dynamicnet