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.
My explanation refers to jQuery 1.7.1.

My goal was to perform a fade animation within the XUL context, but errors were being thrown because jQuery wrongly assumes it is dealing with IE if jQuery.support.opacity is falsy.

The logic that populates the **support** Object was prematurely returning an empty Object due to the inability to interact with a DOM element created via **document.createElement( "div" )**. My problem was solved by using **document.createElementNS**:

```
createElementNS("http://www.w3.org/1999/xhtml", "div");

```

I searched the jQuery bug tracker after coming up with this solution and found the following related ticket: <http://bugs.jquery.com/ticket/5206>

jQuery isn't advertised as working within the XUL context and therefore the team has no plans of addressing the issue, though they should address the issue of the IE false positive. I am content with manually making this one line change in the source code for my application.

Cheers,
Andy