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

Question

I have a web page that I am updating, this page uses Prototype along with Lightbox. I would not want to change the current page to jQuery-only, as I am not sure what else is using Prototype and will subsequently be broken if I no longer include Prototype.

My problem is this:

I have several TDs that I would like to fade out and fade out at the click of a button. This works great when I temporarily take out the Prototype. As soon as I get back to Prototype, the fadeOut()jQuery function will completely break. I suspect this is because Prototype also has fadeIn()and functions fadeOut().

Is there a way to make Prototype not recognize these functions as its functions and still have jQuery perfect for them?

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 appreciated in advance.

Answer 1

In the end, I decided that Prototype.js was just for Lightbox to work, so I turned off Prototype.js and turned on the Lightbox jQuery plugin.

My code now works great.

Answer 2

you seemed to respect the jQuery conflict recommendations, maybe try the following: Prototype functions will be deactivated here, but I'm really not sure if this will be a trick because I did not identify the problem in your code but it is worth a try:

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


}

$direct $j, , jQuery. , ? ? ?

, ,

( ^^)

Answer 3

If jQuery .animateworks correctly for you, you can use .animate({opacity: 0})or .animate({opacity: "hide"})to do the same thing as.fadeOut()