jQuery：別のdivにカーソルを置いたときにdivの不透明度を制御するにはどうすればよいですか？

Question

私は現在、非常に簡単なナビゲーションを使用して私のポートフォリオのウェブサイト上で取り組んでいます。 しかし、タイプをホバリングしているときに、タイプの下のドロップシャドウが強くなるようにしてください（より高い不透明/より暗い）。

私のコードは以下のように見えますが、エラーは発生しませんが、単に何もしません。

the website with a live exampleをご覧ください。

/* Work | Play | About | Contact */ 
/* Shadow Opacity */ 
$(document).ready(function() { 
    $('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo(0, 0.1); 
}); 

/* Shadow Hover effect */ 
$(document).ready(function() { 
    $('a#work').hover(function() { 
     $('#workShadow').fadeTo(200, 0.5); 
    }, function() { 
     $('#workShadow').fadeTo(400, 0.1); 
    }); 
}); 

/* Type movement on hovering */ 
$(document).ready(function() { 
    $('a.shift').hover(function() { //mouse in 
     $(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200); 
    }, function() { //mouse out 
     $(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400); 
    }); 
}); 

基本的に影が強くなると同時に、私は10％の不透明度で開始する影要素（4つの個体のもの）の不透明度を必要とし、ユーザのホバーしながら、タイプ（この部分が機能している）下降し、不透明度が60％に増加します。その後、mouseOutで10％に戻ります。

Answer 1

この行は間違っています - これは引数の束を$()関数に渡しています。

$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo(0, 0.1); 

jQueryのセレクタとしてN引数を期待していない documentationノートとして

、が、1：

$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo(0, 0.1); 

何をすべきオブジェクトのセットを与えるために、共通の（良い）練習です共通のクラスを作成したり、すべてのIDをリストするよりもスマートに選択することができます。現在のHTMLに基づいて、このセレクタはメニュー内のすべてのシャドウ<div>を取得します。これははるかに短くなります。後で新しいメニュー要素を追加する場合は、コードを変更する必要はありません。たとえば、

$('div','#navigationFrame').fadeTo(0, 0.1); 

私はまた、あなたがこれを持っている参照してください。

<li id="work"><a id="work" ...> 

これは、本当に、本当に間違っています。 IDは文書内で一意でなければなりません。ドキュメント内に1つ以上のIDを持つことによって、ベストプラクティスを破るだけでなく、jQueryのID選択が狂ってしまい、期待どおりに動作しなくなります。 fadeToセレクタと同じように、あなたはきれいにコードを変更する影を変更することができます。

$('a','#navigationFrame').hover(function() { 
    $(this).next('div').fadeTo(200, 0.5); 
}, function() { 
    $(this).next('div').fadeTo(400, 0.1); 
}); 

私は、これらの変更でウェブサイトをテストし、それが正常に動作します。

私の例のセレクタは、jQueryのcontextを利用しています。

$('a','#navigationFrame'); 

またはこの：このことにより、

$('div','#navigationFrame'); 

を私たちは、#navigationFrame内の要素だけ私に<a>（または<div>）を与える」はjQueryを言っている

それはこれに相当します。

$('#navigationFrame').find('a'); 

いい考えですこれを利用する。私はあなたが何らかの方法ですべて似ていても、やりたいことをしようとしている要素を手動でリストする傾向があることを知っています。この習慣を揺さぶって、jQueryの強力なセレクタがあなたがドキュメントから望むものを手に入れるようにしてください。

Answer 2

私はこれを使用します。これは完璧に動作して、このような詳細にそれを説明するために特にお願いします

.selected_img 
{ 
    opacity: 1; filter: alpha(opacity = 100); 
    border:none; 
} 

.selected_img_h{ 
    opacity: 1; filter: alpha(opacity = 100); 
    border:none; 
} 

.unselected_img 
{ 
    opacity: 0.6; filter: alpha(opacity = 60); 
    border:none; 
}