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

私も意図したとおりに機能させることができません。ホバー時に1回だけアニメーションを続けます。

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 に答える