Search code examples
cssmootoolsmootools-fx

MooTools slide jumps around in wrapping div

I'm using a slide effect for 'closing' a div, which works fine, except before sliding, it jumps diagonally in its wrapping div, next to a floating div that's above it. Making it look ugly...

This illustrates exactly what I'm talking about: http://jsfiddle.net/ELxPF/

When the floated div is not floated, all is well, so it has something to do with the float. I think the wrapper that is applied to the non-floating div when the slide effect is initiated, does not do clear: both; or something to that effect, causing it to leap diagonally.

What's the best way to resolve this, retaining the floatability of the floating div - and preferably without using extra wrapper elements?

Solution

  • I suggest you use .dissolve() instead.

    $('slide').addEvent('click', function () {
    $('two').dissolve()
});

    DEMO

    And then you can use .reveal() to bring it back.

    $('slide').addEvent('click', function () {
    $('two').dissolve();
});
$('one').addEvent('click', function () {
    $('two').reveal();
});