JQuery的 - 與文字陰影盤旋連續動畫

Question

，所以我試圖讓這個按鈕，用下面的標記：

CSS：

.button { 
    text-shadow: 0px 7px 0px #3b6e62; 
    color: #f2b191; 
    top:0px; 
    -webkit-transition: all 1.4s ease-in-out; -moz-transition: all 1.4s ease-in-out; -ms-transition: all 1.4s ease-in-out; -o-transition: all 1.4s ease-in-out; transition: all 1.4s ease-in-out; 
} 

HTML：

<a href="#"><div class="button">Text</div></a> 

現在，當用戶按下這個按鈕時，我想通過動畫文字陰影-7px和頂部+ 7px來使它看起來像被按下。

幾件事情應該發生：

首先，我要的按鈕進行動畫時，用戶只徘徊。它應該在4px和3px文本陰影/ 4px頂部和原始標記之間動畫。

比按鈕被按下時，它應該一直下來，文字陰影-7px和頂部+ 7px。 （並且因爲它是同一頁面上的鏈接而返回）。

我希望這仍然有道理。

我已經嘗試過很多JQuery的例子，但我似乎無法得到它的工作。 目前我與這段代碼實驗：

var timer; 

    $(".button").hover(function() { 
     timer = setInterval(function() { 
      $(".button").css('top', '4px'); 
      $(".button").css('text-shadow', '0px 3px 0px #3b6e62'); 
     }, 600); 
     timer = setInterval(function() { 
      $(".button").css('top', '0px'); 
      $(".button").css('text-shadow', '0px 7px 0px #3b6e62'); 
     }, 600); 
     // Change the interval as you see fit. 
    }, function() { 
     clearInterval(timer); 
    }); 

我無法得到它的工作我的意圖太的方式。它只是在懸停時只保留一次動畫。

Answer 1

我已經創建了一個小提琴，只是看到，如果這是你想要什麼，你想要什麼我不太清楚

編輯：設置動畫懸停環路（但現在它似乎與你想要的東西被點擊的.button時）

腳本

var timer; 

$(".button").hover(function() { 
    timer = setInterval(function(){ 
    $(".button").css('top', '4px'); 
    $(".button").css('text-shadow', '0px 3px 0px #3b6e62'); 

    setTimeout(function(){ 
     $(".button").css('top', '0px'); 
     $(".button").css('text-shadow', '0px 7px 0px #3b6e62'); 
    },400); 
    },800);      
}, function() { 
    clearInterval(timer); 
}); 

$(".button").mousedown(function() { 
    $('.button').css({top: '7px'}); 
}); 

$('.button').mouseup(function() { 
    $('.button').css({top: '0px'}); 
}); 

也是我從改變的過渡時間玩0至.4s

，爲了你需要給position

Demo

New Demo