Using fadeIn() & fadeOut() with jQuery and Prototype at the same time

Question

Hi there

I have a webpage which I'm updating, this page uses Prototype together with Lightbox. I would not like to change the current page to jQuery-only as I'm not sure what else uses Prototype and would break subsequently if I don't include Prototype anymore.

My problem is the following:

I have a few TD's which I would like to fade in and fade out with the click of a button. This works perfectly when I temporarily take out Prototype. As soon as I put Prototype back in, the fadeOut() jQuery function breaks completely. I suspect this is because Prototype also has a fadeIn() & fadeOut() function.

Is there a way I can force Prototype not to recognise these functions as its functions and still have jQuery perform them perfectly?

Here is my jQuery-code:

var $j = jQuery.noConflict();

$j(document).ready(function () {    
    $j("a.archiveBtn.2009").click(function () {
        $j("td.archive.2009").fadeIn();
        $j("tr td.archiveBtn").css("paddingBottom", 20);
        $j("tr td.archiveBtn").css("borderBottom", "#999 1px dashed");
        $j("a.hideArchive.2009").show();

        return false;
    });

    $j("a.hideArchive.2009").click(function () {
        $j("td.archive.2009").fadeOut(function () {
            $j("tr td.archiveBtn").css("paddingBottom", 0);
            $j("tr td.archiveBtn").css("borderBottom", "none");
        });
        $j(this).hide();

        return false;
    });

    $j("tr td.archiveBtn").parent().prev("tr").children("td").css("paddingBottom", 20);
});

Any help would be appreciated and thanks in advance.

Answer 1

Hi, you seem to have respected the conflict recommandations from jQuery, well maybe try the following, it will desactivate Prototype functions here, but I'm really not sure it will do the trick because I didn't identify the issue in your code but it's worth the try :

jQuery(document).ready(function($) {
         $("a.archiveBtn.2009").click(function () {
 .....


}

With this you can use $ directly instead of $j and you are sure it is only jQuery function. Btw what do you mean by break completely? The animation is weird? It doesn't do the fade at all?

Hope this helps,

Have a nice day (listening to Carlos Jean ^^)

Answer 2

If jQuery's .animate is working correctly for you then you can use .animate({opacity: 0}) or .animate({opacity: "hide"}) to do the same thing as .fadeOut()

Answer 3

In the end, I determined that Prototype.js was only there for Lightbox to work, so I disabled Prototype.js and incorporated the Lightbox jQuery plugin.

My code now works perfectly.