JQueryを使用してクリックした要素をアイテムフェーディングに認識させる

Question

ユーザーが特定のクリック可能なページ要素の上に移動したときにスムーズなトランジション効果を作成するためにロールオーバーJavascriptプラグインを使用しています。これはうまくいっていますが、ページの読み込みを使用してダイナミックコンテンツを生成する代わりに、私はajax呼び出しを行うことにしました。私の問題は、一般的にJavaScriptの理解が不足しているため、このプラグインを理解できないということです。

ユーザーが別の要素をクリックするまでクリックした後、要素を不透明に保つ方法を実装するにはどうすればよいですか？ここで

は、プラグインからの抜粋です：

$(document).ready(function(){ 
     $("#leftBar .divider, #leftBar .dividerLast").fadeTo("9000", 0.8); 
     $("#leftBar .divider, #leftBar .dividerLast").hover(function(){ 
      $(this).fadeTo("5000", 1.0); 
     },function(){ 
     $(this).fadeTo("5000", 0.8); 
    }); 
}); 

そしてここでは、フロントエンドに私のコードです：

<div class="divider" onclick="$('#employee_form').submit(); SetBackgrounds(); $(this).css('background','url(common/css/images/leftBarBG.gif) top repeat-x');"> 
    <img src="common/img/employee_image.jpg" class="float"/> 
    <h2>Employee Name</h2> 
    <h3>Founder &amp; CEO</h3> 
    <p>We're passionate about bringing your great ideas to life on the web, and in print.</p> 
    <p><a href="mailto:email@company.com">employee@company.com</a></p> 
</div> 

は、私はonclickのフォーム送信を使用して、AJAX呼び出しを作っています。

また、SetBackgrounds()のコードもあります。私はonclickでも電話しています。おそらく私のやり方よりも良い書き方がありますが、私が言ったように、私はまだJavascriptについてはかなり緑色です。この機能は私が望むほど滑らかではありませんが、この機能を働かせることができれば、突然の背景の変化を隠すことになると期待しています。どれでも建設的な批判は大歓迎です。

function SetBackgrounds() 
{ 
    $("#leftBar .divider").css('background','url(common/css/images/leftBarBG-hover.gif) top repeat-x'); 
    $("#leftBar .dividerLast").css('background','url(common/css/images/leftBarBG-hover.gif) top repeat-x'); 
    $("#leftBar .divider:hover").css('background','url(common/css/images/leftBarBG.gif) top repeat-x'); 
    $("#leftBar .dividerLast:hover").css('background','url(common/css/images/leftBarBG.gif) top repeat-x'); 
} 

更新：提出さ フォームは、従業員の経歴のためのデータベースを照会私が書いたPHPスクリプトに提出するフォームを隠されています。私はクエリに問題はありませんが、それはあなたがこれらのボタンが何を達成しているかを理解するのに役立つかもしれません。私がこのスクリプトで抱えている問題は純粋に美的なものです。

Answer 1

私は何かが紛失しているかもしれませんが、要素が不透明なonclickになっている場所がわかりません。

$("#leftBar .divider, #leftBar .dividerLast").click(function(){ 
     $(".opaque").fadeTo.("5000", 0.8).removeClass("opaque"); 
     $(this).fadeTo("5000", 1.0).addClass("opaque"); 
}); 

次に変更：

$("#leftBar .divider, #leftBar .dividerLast").hover(function(){ 
     $(this).fadeTo("5000", 1.0); 
    },function(){ 
    if(!$(this).hasClass("opaque")) $(this).fadeTo("5000", 0.8); 
}); 

あなたが代わりにfadeTo()のcss()かanimate()を使用するか、多分タイミングを減少させることができました。