2
私はガイドやこの記事のタイトルに似た質問の後でたくさん検索してきました。しかし、私は良い答えを見つけることができませんでしたので、私は自分のものを作り、結果を共有することに決めました。この効果をより良くするためにはまだ何か指針が必要です。他の要素を有効にして背景画像を表示する
ここで私はStackoverflowとjQueryの新機能に注目してください。
私のポートフォリオのリンクには、見た目の良い効果があります。リンク上でマウスを動かしたときに達成したい効果は、次のとおりです。
- リンク先の色が変わる必要があります。
- div内の他のすべてのリンクは、あなたがホバリングしているリンクのフォーカスを高めるために不透明度を減らす必要があります。
- リンク上をホバーすると、背景画像がフェードインまたはフェードインします。
例：
私はあなたが結果をSEができJsfiddleを作成しました。
問題：あなたはリンクの上に数回を置くと
jQueryの機能が出て再生されます。私はスクリプトを停止する必要があります - どのように私はそれを行うのですか？
サイトのパフォーマンスを向上させるために、このコードをもっとスマートに書く方が良いですか？または私は正しい軌道にいるのですか？ここで
は、jQueryのコードは次のとおりです。
// When hovering on class .nr-1, #section-1 will fadeIn children div .bg-1 - and so on.
$(".nr-1").hover(function() {
$("#section-1").children(".bg-1").fadeIn(500);
}, function() {
$("#section-1").children(".bg-1").fadeOut(500);
});
$(".nr-2").hover(function() {
$("#section-1").children(".bg-2").fadeIn(500);
}, function() {
$("#section-1").children(".bg-2").fadeOut(500);
});
// When hovering a link in all the <a> tags will get the class "bla"
$(function() {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// The link you hover over will gett a class new.
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
は素晴らしい一日を！
UPDATE
すべての答えをいただき、ありがとうございます。効果を得るための最良の方法は@Redet Getachewの答えです。
ここにはアップデートされたバージョンがあります。
_「あなたはリンクの上に数回を置くとjQueryの関数が出て再生されます。私は、スクリプトを停止する必要がある」_アニメーションの一部を停止すべき？ '.fadeOut（）'、 '.fadeIn（）'？ – guest271314
私は最初の関数が '.fadeOut（）'と '.fadeIn（）'を停止する必要があると思います。リンクを数回速く動かすと、あなたが持ち歩いた回数だけ画像が切り替わります。 – hakanfilip