Make item fading aware of a clicked element with JQuery

Question

I am using a rollover Javascript plugin in order to create a smooth transitional effect when a user hovers over certain clickable page elements. This has been working great - but I have decided that instead of using page loads to populate dynamic content, that I would make an ajax call. My problem is that I really don't understand this plugin due to a lack of understanding of JavaScript in general.

How would I go about implementing a method that will keep an element opaque after it has been clicked until the user clicks another element?

Here is the snippet from the plugin:

$(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);
    });
});

And here is my code on the front end:

<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>

I have been making ajax calls using the onclick form submission.

Here is also the code to the SetBackgrounds() function that you can see I am also calling with the onclick. There is probably a better way to write it than how I did, but as I said - I am still pretty green when it comes to Javascript. The function isn't as smooth as I would like it to be, but I am hoping that if we can make this thing work, it will mask the sudden background changes. Any constructive criticism is greatly appreciated:

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');
}

Update: The forms being submitted are hidden forms that submit to a PHP script I wrote that queries a database for employee bios. I am not having issues with the query, but that may help some of you to better understand what these buttons are accomplishing. The problems I am having with this script are purely aesthetic.

Answer 1

I may be missing something, but I don't see where you have the elements turn opaque onclick.

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

Then change:

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

You could use css() or animate() instead of the fadeTo() or maybe decrease the timing.