jQueryホバーアニメーション

StackOverflow https://stackoverflow.com/questions/4458309

  •  10-10-2019
  •  | 
  •  

質問

Div BoxへのホバーエフェクトをAppyにしたいのですが、ページ上の最大60個のボックスになる可能性があります。 CSSホバーエフェクトとまったく等しいはずですが、ホバー色にフェードエフェクトを適用したいと思います。たとえば、背景色のように薄緑色、濃い緑色の背景色として濃い緑があり、それから一方から反対側にフェードするはずです。

私はjqueryと少し遊んでいましたが、私が望んでいた結果を得ることができました：

    $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });
役に立ちましたか？

解決

使用する必要があります まともなカラープラグイン. 。見る jQueryアニメーションバックグラウンドカラー 詳細については。

また、元のコードは実際には何もしません。その後、別の色にアニメーション化したいからです。

$(".box").each( function () {
  $(this).data('baseColor',$(this).css('color'));
  $(this).hover(function() {
    $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
  },function() {
    $(this).animate({ backgroundColor: $(this).data('baseColor') }, 500);
  });
});

編集：参照 http://jsfiddle.net/ehxnq/2/ 例えば。

他のヒント

私はjqueryの経験はあまりありませんが、あなたが両方で同じ色を持っているので、それはただのコピーと患者の間違いのように見えます .animate()s

私はあなたが使用していないと信じています hover あなたがすべきと同じように機能します。 2番目の関数は、ユーザーがボックスを離れるときに使用され、元の色に戻る必要があります。

たとえば白：

  $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#FFFFFF" }, 500);
    });

$(".box").hover(
  function () {
 // this is mouseover
  }, 
  function () {
//  this is mouse out
  }
);

こちらの例を参照してください

http://jsfiddle.net/krrse/

このコードを確認してください、これはあなたに役立つと思います!!!

 <!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>

</body>
</html>

このリンクも見てください、http://api.jquery.com/hover/

60箱？イベント委任、またはライブを使用してください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top