2

jQuery の効果がすぐに有効にならない理由はありますか? 私は jQuery ホバー フェード効果を持っていますが、JavaScript を無効にしている人のバックアップとして CSS ロールオーバーも持っています。ページを読み込んでリンクにカーソルを合わせると、CSS 効果が得られますが、その後はいつでも、素晴らしく滑らかな jQuery 効果が得られます。これは、リンクごとに繰り返す必要があります。これに対する修正はありますか？

私のjQueryコードはこれです：

$(document).ready(function() {

$(".nav-link").hover(function() {
 $(this).animate({ color: "#669900" }, 250);
 return false;
}, 
function() {
 $(this).animate({ color: "#999999" }, 250);
});

$(".twit-link").hover(function() {
  $(this).animate({ color: "#0099CC" }, 250);
  return false;
}, 
function() {
 $(this).animate({ color: "#999999" }, 250);
});

$(".rss-link").hover(function() {
 $(this).animate({ color: "#CC6600" }, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#999999" }, 250);
});

$(".sidebar-item").hover(function() {
  $(this).animate({ color: "#669900"}, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#333333"}, 250);
});

$(".archive-link").hover(function() {
  $(this).animate({ color: "#666666"}, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#999999"}, 250);
});

$(".sub").hover(function() {
  $(this).animate({ 'background-color': '#336600'}, 250);
  return false;
}, 
function() {
  $(this).animate({ 'background-color': '#669900'}, 250);
});

$(".post-sb").hover(function() {
  $(this).animate({ 'opacity': 1.0,
   'filter': 'alpha(opacity = 100)'}, 250);
  return false;
}, 
function() {
  $(this).animate({ 'opacity': .25,
   'filter': 'alpha(opacity = 25)'}, 250);
});

});

jQuery を Google から直接取得しています ( http://code.jquery.com/jquery-latest.pack.js )

サファリを使用しています。現在、私は自分のサイトを MAMP でテストしているので、自分のコンピューターではローカルですが、最終的には外部サーバーに移動します。

4

3 に答える 3

2

CSS にはホバー効果があるため、ホバー イベントが発生する前に jQuery に先行してスタイルを変更します。これらのスタイルを無効にするか、jQuery の読み込み時に要素のスタイルを変更して、CSS:hoverセレクターがないようにします。より長く効果があります。

HTML には、たとえば次のようなものがあります。

<a class="nav-link njs">My Link</a>

あなたのCSSで：

.nav-link { color: #999999 }
.njs.nav-link:hover { color: #669900; }

あなたのjQueryで：

$(".njs").removeClass("njs"); //Disable the hovers

また、そのコードを見やすくするために、ここで関数を提案します。

$(function() {
  $(".njs").removeClass("njs");
  setColors(".nav-link", "#669900", "#999999");
  setColors(".twit-link", "#0099CC", "#999999");
  setColors(".rss-link", "#CC6600", "#999999");
  setColors(".sidebar-item", "#669900", "#333333");
  setColors(".archive-link", "#666666", "#999999");
  setColors(".twit-link", "#0099CC", "#999999");

  $(".sub").hover(function() {
    $(this).animate({ 'background-color': '#336600'}, 250);
  }, function() {
    $(this).animate({ 'background-color': '#669900'}, 250);
  });

  $(".post-sb").hover(function() {
    $(this).fadeIn(250);
  }, function() {
    $(this).fadeTo(250, 0.25);
  });

});

function setColors(selector, hColor, nColor) {
 $(selector).hover(function() {
    $(this).animate({ color: hColor}, 250);
  }, function() {
    $(this).animate({ color: nColor}, 250);
  });
}
于 2010-03-08T22:54:24.757 に答える
0

jQuery ファイルをローカルで使用してみてください。Google でさえ、自分のコンピューターから提供されるものには太刀打ちできません。また、ここで見られる遅延がオンラインになったときに反映されないこともあり得ます。

于 2010-03-08T22:53:05.853 に答える
0

これは最善の解決策ではないかもしれませんが、効果を設定する直前に JavaScript で CSS を無効にしてみてください。anotherClass:hoverホバー効果の CSS のようなクラスを追加してから、JavaScript でクラスを削除できます。

于 2010-03-08T22:40:19.010 に答える