One of the projects I'm working on right now requires having a Silverlight object on a page grow to be larger and shrink to be smaller as its containing <div> area's size is changed using javascript. Below is the Silverlight embed code, and the relative javascript for using either jQuery or MooTools. All the javascript functions take action on a div section named 'resizableControlHost' which I added to wrap the normal 'silverlightControlHost' div section.

Basic HTML of Silverlight object embed (wrapped in a 'resizableControlHost' div):

<div id="resizableControlHost">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," 
                type="application/x-silverlight-2" 
                width="100%" height="100%">
        <!-- details removed -->
        </object>
    </div>
</div>

Resizing the 'resizableControlHost' div with jQuery:

function gotoSmallSize() {
    $("#resizableControlHost").animate({
        width: "200px",
        height: "100px",
    }, 500);
}

(click 'read more' to keep reading..)

While doing a proof-of-concept I encountered a bug with jQuery in Firefox (#4628), so I ended up needing to use MooTools - currently only the MooTools implementation works across IE, FireFox, and Chrome.

Resizing the 'resizableControlHost' div with MooTools:

function gotoSmallSize_MooTools() {
    var morph = new Fx.Morph('resizableControlHost');    
    morph.start({
        width: '200px',
        height: '100px',
    });
}

Below is a sample app running in an iframe. The first row of buttons will resize the <div> section containing the Silverlight embed with jQuery, the second row with MooTools. The green square is the Silverlight object, the gray is the background color of the HTML page containing the Silverlight object. Click the link below the sample to view it in a standalone html page (and look at the source). They both should behave about the same, unless you are in Firefox.

The bug in Firefox is that the Silverlight object is actually being reloaded (and restarted) with every resize in Firefox. You'll note that the loaded timestamp in the Silverlight app changes when resizing with jQuery in Firefox, but stays consistent everywhere else.

Once you get the <div> sections resizing properly with jQuery or MooTools, doing the dynamic sizing in Silverlight is pretty straight forward. Just make sure your HTML object embed code is sizing to 100% width and height and not a fixed size - do the same with your MainPage.xaml's width and height. Listen to the SizeChanged event on the MainPage if you need to do custom logic when your Silverlight object resizes.

Hopefully someone more versed in jQuery/MooTools can figure out why animating embedded objects isn't working in jQuery on Firefox and get bug #4628 knocked out.