Question: I know its possible to integrate jQuery within Firefox addons, but are we able to manipulate (animate, move, adjust transparency, etc) XUL elements themselves?

From what I understand, the Firefox addon can use jQuery to manipulate HTML/DOM elements, but not sure about XUL elements.

Answer: 
***Short answer:*** Yes

***Long Answer:***

I experimented with it myself. I could only use it in a limited way. Manipulation of XUL elements is possible. But I am having a hard time observing events, since I am pretty new to jQuery - I don't know how to tweak it to observe events at Firefox/XUL level - I don't even know whether tweaking is required :D

***Example:***

**overlay.xul**

```
<?xml version="1.0"?>    
<?xml-stylesheet href="chrome://testaddon/content/overlay.css" type="text/css"?>

<overlay id="testaddon_overlay"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml">

    <script type="application/x-javascript" src="chrome://testaddon/content/jquery-1.4.2.js" />
    <script type="application/x-javascript" src="chrome://testaddon/content/overlay.js" />

    <toolbox id="navigator-toolbox">
        <toolbar toolbarname="TestAddonToolbar" class="chromeclass-toolbar">
            <toolbaritem>
                <toolbarbutton id="btnHide" label="HideMe" onclick="hideMe();" />
            </toolbaritem>            
        </toolbar>
    </toolbox>

</overlay>

```

**overlay.js**

```
function hideMe()
{
    $('#btnHide').hide();
}

```

Above code will hide the button when you click on it - basic XUL manipulation with jQuery!

But as I said, try to observe document load and other such events and it gets complicated very quickly (or I don't know much :D).

**Update:** I tried some effects. Effects.fadeIn() works - but since the transparency properties are set differently in XUL when compared to HTML, the button stays there and in the end, it abruptly disappears. Now it is becoming clear to what extent we can (can't) use jQuery to manipulate XUL.
The answer right now is "mostly".

Basic stuff works, including selecting, deleting and finding. I use 1.5.2 pretty heavily both inside an extension and on content pages from the extension.

$.ready() also doesn't work because jQuery assumes and waits for a body. This is the [commit](https://github.com/jquery/jquery/commit/262fcf7b7b919da1564509f621cf7480a5d5572b) that broke it.

Some stuff doesn't work because, as @Daniel describes, jQuery's doesn't properly detect what it can and can't do in XUL (more background below). From stepping through jQuery code I have have found you need at least the following lines in your own code.

```
// Workarounds for jQuery not properly testing support in XUL environment

// These are done at jQuery init
// This is actually critical, otherwise elements are not properly removed from the cache and you get a cache[id] is undefined
crowdmash.$.support.deleteExpando = true;

// These are done at ready(), but jQuery never fires ready in XUL
// XUL doesn't seem to support offsetWidth and offsetHeight (without this :hidden is broken which breaks fadeIn)
crowdmash.$.support.reliableHiddenOffsets = false;
crowdmash.$.support.opacity = true;

```

If you want to use jQuery on a content page from an extension, see my [tips](http://forums.mozillazine.org/viewtopic.php?f=19&t=2105087).

[jquery-xul](https://github.com/ilyakharlamov/jquery-xul/wiki) modifies 1.4.4 to better work with XUL. I have not tried it yet, but from looking at its changes it does look like fixes the ready issue. I don't know if it fixes the support issue .

As background on the $.support issue. The problem is that jQuery's feature detection creates a and then populates it using innerHTML. XUL divs do not support innerHTML, so the support code fails marking nothing as supported. There is actually a ticket on this that is open and being discussed for 1.7 - <http://bugs.jquery.com/ticket/5206>.