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