使用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);
});

您可以使用css()或animate()代替fadeTo()或減少計時。