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

我也已将过渡时间从1.4s更改为.4s

并且为了应用顶部属性，您需要提供 position

<强> Demo

<强> New Demo

JQuery - 使用文本阴影悬停时的连续动画

1 个答案: