8

:hover通常のCSSをよりスムーズにするスクリプト/方法はありますか？

アイデアは、おそらくグラデーションの背景を持つ2つのクラスを取得し、スクリプトがクラスをスムーズに交換するというものです。したがって、グラデーションはボタンを押したように見えます。自動である必要があるため、トリガーを呼び出します。これにより、が2番目のクラスとして$('.someclass').SmoothTransition();自動的に使用されます。.someclass:hover

バウンティ編集

これは実は非常に興味深い質問で、私は部分的に答えました。私の答えの問題は、それが無地の背景色に対してのみ機能し、CSSグラデーションやその他のより具体的なパラメーターでは機能しないことです。

このスクリプトは、jQuery開発者ライブラリで「必須」である必要があります。だから、私はこれを行うことができる方法を考えたり、良いリソースを見つけることができる人に150人の担当者を提供しています。

あなたのメソッド（単一のjQueryプラグイン）がこれらすべての例で機能する場合、あなたは勝ちました！

例： http： //jsfiddle.net/4pYWD/

現代の編集

この質問は2011年に行われたため、CSSが移行したとき、商用ゲームはオプションではありませんでした。次に、この質問で、なぜすべてがCSSではなくJSに焦点を合わせているのかを理解してください。これらの回答から、当時完璧だったJSスクリプトを開発しました。もはや、CSSトランジションは今や究極のソリューションであるため、適切な答えが再び受け入れられました。

4

6 に答える 6

19

これを実現するには、 css3トランジションを使用できます。

例：

a {
    color: blue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

a:hover {
    color:yellow;
}

あなたはここでこれを生きてチェックすることができます。

例は静的な色で示されていますが、css3グラデーションを使用することもできます。

a {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}

a:hover {
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}
于 2011-07-23T14:19:50.520 に答える
3

http://jsfiddle.net/btleffler/MZ6T8/

Chrome、Safari for Windows、Operaで動作します。FirefoxとIEはCSSRulesオブジェクトを粗末にサポートしているので、結果はせいぜいふざけています。ただし、問題を修正できるかどうかを確認するために作業を続けます。

cssスタイルも微調整する必要があります。:hover最後の例ではセレクターに背景色が割り当てられていないため、新しい要素には背景色がありません。

誰かがこのようなものについていくつかのアイデアを持っているなら、私はそれらを聞いてみたいです。

編集：修正済み

http://jsfiddle.net/btleffler/JfPBS/

これはうまく機能します。すべてのcssルールでセレクターを検索し、:hoverそのルールに関連付けられているCSSテキストと非：hoverルールをにプラグインできるjavascriptオブジェクトとして保存します$().css()。その後、を使用$.extend()してホバークラスを通常のクラスに拡張することにより、実際の「ホバークラス」を計算します。このように、:hoverクラスに背景が定義されていない場合でも、通常のクラスの背景が残ります。

最後に、要素を作成し、元の要素の真下に配置し、CSSがホバーを処理する原因を取り除き、通常のスタイルを元の要素に追加し、計算されたホバースタイルをその下の新しい要素に追加します。

その後に行う必要があるのは、マウスイベントの不透明度をアニメートすることだけです。単純！

于 2011-10-20T20:08:32.330 に答える
1

http://desandro.github.com/motion-emotion/このプロジェクトでは、ie7とie6を除くすべての主要なブラウザーで変換が可能です。これら2つのブラウザのプログレッシブエンハンスメントがあります

于 2011-10-18T18:09:12.650 に答える
0

だから私が探していた解決策はこれです：

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script>
    $(document).ready(function() {
        $("p").hover(function () {
            $(this).toggleClass("blue", 1000);
        });
    });
</script>
<style>
    p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; color: white; background: yellow;}
    .blue {background: blue;}
</style>
</head>
<body>
<p class="">Hover over this</p>
</body>
</html>

ライブデモをご覧ください：http：//jsfiddle.net/hobobne/uRJWG/

注：css3グラデーションでは機能しません。それでも..

于 2011-07-24T06:26:51.960 に答える
0

それは本当にラフですが、私は（理論的には）ブラウザ間で、そしてあなたが望むどんな画像でも機能するはずのフィドルを持っています。今のところ、それは少しハッキーです（非常に読んでください）が、それは始めるのに良い場所であり、おそらく人々を完全な答えに導くでしょう。また、すぐに実行すると、現時点では機能しません。マウスが要素から外れる前に、ボタンを完全にフェードインまたはフェードアウトする必要があります。私が言ったように、ハッキーですが、スタートです。

于 2011-10-22T03:41:51.237 に答える
-1

私はついにホバーでスムーズに移行するための最も究極の方法を見つけました。これが同じ問題を抱えている他の人たちに役立つことを願っています。私の現在のテストは、これが私が思いつく可能性のあるすべての例で100％機能することを示しています。ハイパーリンクと通常のコンテナで機能します。

GitHubからダウンロード

このプラグインには3つのオプションがあります。

  • showSpeed： [数値]-アニメーションの速度を緩和します
  • hiddenSpeed： [数値]-イーズアウトアニメーションの速度
  • includeText： [boolean]-要素のhtmlを使用するかどうかを決定します

このプラグインを最適化する方法についてアイデアがある場合は、私に連絡するか、コメントを残してください:)

于 2011-11-16T05:49:17.857 に答える