2

リスト項目の非アクティブ イメージとアクティブ イメージの両方を持つ背景イメージにストライプを使用しています。アクティブなクラスをゆっくりとロードしたい。

1 つのスパンの CSS の例

.customer1 {    width: 105px; height:68px;  background:url(../img/in-customer1.png) 0px 15px  no-repeat;    display:block; }
.customer1_active {   background:url(../img//customer1_active.png) 0px -70px  no-repeat;  }

HTML

<div id="customers">
 <span class="customer1"></span> 
 <span class="customer2"></span>
  <span class="customer3"></span>
  <span class="customer4"></span> 
</div>

これまでに試した

 $(this).removeClass('default').addClass('fixed').fadeIn('slow');

スパンでのホバー時にアクティブな画像をゆっくりとロードする方法を教えてください

4

3 に答える 3

2

これには 2 つの一般的なアプローチがあり、1 つは jquery UI ベースで、もう 1 つは css3 変換です。

IE の互換性が必要な場合、css3 トランジションはオプションではありません。

jQuery の使用:

$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );

詳細については、公式ドキュメント ページを参照してください。

もう 1 つのオプションは、CSS3 変換を使用します。

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

フィドルはここにあります。

編集

背景画像を直接遷移することはできません。画像の状態が異なる複数の要素を使用するか、両方の状態を含むスプライトを使用する必要があります。CSS3 を使用してこれを行う方法に関する詳細な記事を見つけました。また、互換性の問題についても説明しています。

編集を終了

最後に、アーキテクチャの観点から、データ属性と jquery を使用して画像を交換することを検討することをお勧めします。これは、url 属性のみが変更される複数のクラスを追加するよりもはるかにクリーンです。また、読みやすく、管理しやすくなっています。

于 2012-11-19T06:37:14.697 に答える
0

あなたの質問に答えるには、クラスを「ゆっくり」変更することはできません.現在のWebテクノロジーではサポートされていないためです[背景画像の色とcss3では可能ですが、それは機能しませんbackground-images] ...

ただし、必要な効果を実現するには [つまり、背景画像を使用したマウスオーバーの「ホバー」効果]、次の方法を使用します。

各要素<div>内にオーバーレイ コンテナ " " を追加します。<span>次に、css で絶対位置に配置し、背景画像 [ホバー画像になります] を追加します。div をスパンと同じサイズにし、スパン タグにマウスオーバー/マウスアウト ハンドラーを追加します。これにより、その<div>内部の不透明度がアニメーション化されます。要素が " hover" に応答するようにします。

それで、話が減り、コードが増えます....

HTML:

<div id="customers">
 <span class="customer1"></span> 
</div>​

CSS:

#customers span {   width: 105px; height:68px;  display:inline-block; }
.customer1{
    background:url(http://placekitten.com/105/68) 0px 0px  no-repeat;
}
.customer1_active{
    background:rgba(0,0,0,0.7);
}
#customers .active {
position:absolute;
}​

JS:

$("#customers span").each(function(){
    $(this).append("<div></div>").find("div").attr("class",$(this).attr("class")+"_active active").css({height:$(this).css("height"),width:$(this).css("width"),opacity:0});
    $(this).hover(function(){$(this).find("div").clearQueue().animate({opacity:1})},function(){$(this).find("div").clearQueue().animate({opacity:0})})
    });​

JSFiddle: http://jsfiddle.net/mGcjU/1/

于 2012-11-19T07:30:38.330 に答える