0

所以我正在尝试使用以下标记制作此按钮：

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

我也无法让它按照我的意图工作。它只是在悬停时只保持动画一次。

4

1 回答 1

0

我创建了一个小提琴，看看这是否是你想要的，因为你想要的对我来说不是很清楚

编辑：将动画设置为在悬停时循环播放（但现在单击 .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

演示

新演示

于 2013-01-08T05:17:55.010 回答