0

このトピックに関して複数の質問がありましたが、確かな答えに落ち着いたことはありません. 私もさまざまな方法を試しましたが、本当に最善の解決策は見つかりませんでした。

私の状況では、ページのヘッダーに配置する必要があるフラグがたくさんあります。各フラグは PNG であり、それらの白黒バージョンもレンダリングしました。シンプルな CSS クラス (DIV や IMG など) を追加し、ホバーするとカラー画像にフェードアウトし、ホバーしていないときにフェードアウトする jquery の小さなピースが必要です。それ。

それは退屈なので、CSSでやりたくありません。Jquery は私が感じている前向きな方法であり、より上品に見えるでしょう。

助けてください。CSS のレイヤーを重ねたり、巨大な .JS インクルード ファイルを使用したりせずに、可能な限り最小で最も効率的なコードが必要です。

ありがとう、

リチャード

4

4 に答える 4

1

Arnar Yngvason のソリューションでは、マウスをすばやく何度も画像の内外に移動すると、問題が発生する可能性があります。これにより、アニメーションがフリーズする可能性があります。この欠陥は、fadeIn/fadeOut メソッドの代わりに、fadeTo メソッドを使用することで回避できます。

<div class="flag" style="background-image:url(bw.png)"><img src="incolor.png" style="display:none;"></div>

<script>
$(document).ready(function() {
    $('.flag').hover(function() {
        $(this).find('img').stop().fadeTo(400, 1);
    }, function() {
        $(this).find('img').stop().fadeTo(400, 0);
    });
});
</script>
于 2013-06-28T20:16:53.870 に答える
0

HTML：

<div class"flag-area england"><div>
<div class"flag-area germany"><div>

CSS：

/* Example default values */
.flag-area
{
    background-position: 5px 10px;
    background-repeat: no-repeat;
}

/* Flag specfic values */
.flag-area.england
{
    background-image:url('images/england.png')
}

/* Flag specfic values */
.colored-flag.england
{
    background-image:url('images/england_colored.png')
}

.colored-flag.germany
{
    background-image:url('images/germany_colored.png')
}

JavaSript：

$('.flag-area').hover(function () {
    $(this).toggleClass('colored-flag', 500);
}, function () {
    $(this).toggleClass('colored-flag', 1000 );
});

ただし、CSSを使用してこの問題を解決し、次のようなルールを使用できる場合は、JavaScriptを使用しないことをお勧めします。

/* Flag specfic values */
.flag-area.england:hover
{
    background-image:url('images/england_colored.png')
}

また、もう1つのヒント：表示するフラグが多い場合は、多くの画像を使用せず、すべてのフラグを含む1つの画像のみを使用し、background-imageを変更する代わりに、すべてのフラグに同じbackground-imageを使用してその位置を変更します。

于 2012-06-11T13:14:39.960 に答える
0

多分このようなもの：

<div class="flag" style="background-image:url(bw.png)"><img src="incolor.png" style="display:none;"></div>

<script>
$(document).ready(function() {
    $('.flag').hover(function() {
        $(this).find('img').stop().fadeIn('fast');
    }, function() {
        $(this).find('img').stop().fadeOut('fast');
    });
});
</script>
于 2012-06-11T13:16:39.363 に答える
0

これを見てください：http：//jsbin.com/efovuz/2/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .flag { width:350px; height:150px; position:relative; }
  .flag img { position:absolute; left:0; top:0; display:block; }
</style>
</head>
<body>
<div class="flag">  
  <img src="http://placehold.it/350x150/ff0" /> 
  <img class="bw" src="http://placehold.it/350x150/" />  
</div>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(function() {
       $('.flag').hover(
          function () {
              $(this).children('.bw').first().fadeOut('slow');
           },
          function () {
              $(this).children('.bw').first().fadeIn('slow');
           }
        ); 
    });
</script>
</body>
</html>
于 2012-06-11T13:21:44.687 に答える