0

どこでも検索できますが、質問に対する答えが見つかりません。

私は多くの CSS3 トランジションとアニメーションを持っており、実際にそれらを Internet Explorer 8-9 に実装したいと考えています。しかし、私はJavaScriptの初心者です。

まず、これは私のウェブサイトhttp://tinyurl.com/axjuccxで、 使用されている CSS アニメーションが表示されます。

今、私が達成しようとしているのは同じですが、Jquery animate() 関数を使用しています。

例として、go というボタンにカーソルを合わせると、block という div をアニメーション化するこのコードを見てみましょう。

$("#go").mouseenter(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
$("#go").mouseleave(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

これは機能していないようで、「mouseleave」部分を省略すると、アニメーション化されますが、アニメーション化された状態のままになります。マウスリーブ時に元に戻したい。

どんな助けでも大歓迎です。

心から

4

1 に答える 1

0

stop() を使用すると役立つ場合があります。

$("#go").hover(
  function () {
    $("#block").stop(true, true).animate(... your code here ...);
  }, 
  function () {
    $("#block").stop(true, true).animate(... your code here ...);
  }
);

JQuery 停止 (): http://api.jquery.com/stop/

JQuery ホバー (): http://api.jquery.com/hover/

于 2013-01-04T09:33:01.767 に答える