2

I am using UI.Layout, trying to create a behavior similar to the ExtJs layout: On close / open of the horizontal panes, the resizer should be hidden and re-appear with a slide effect.

This was easy on pane closing, since the effect appears after the onclose event, but I'm having serious difficulties on applying the same behavior on pane open.

Since the event for onopen triggers regardless of the effect being applied on the resizer, i find no way of delaying the pane opening until the resizer slide is complete.

Here is the relevant code:

outerLayout = $('#outer-layout').layout({
    west : {
        // ...
        onclose_start : function() {
            hideResizer('west');
        },
        onclose_end : function() {
            styleResizer('west');
            showResizer('west');
            animateResizerOnClose('west');
        },
        onopen_start : animateWestResizerOnOpen
    }
    // ...
});

function animateWestResizerOnOpen() {
    $(this).parent().delay(1400).queue(function() {
        $('#outer-layout').layout().open('west');
    }).hide('slide', 300);
}

What's wrong here?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Eliran Malka
  • 15,821
  • 6
  • 77
  • 100

1 Answers1

1

Somewhat of a workaround, but it works well:

Since it seems there is no way of interfering with the fx-queue of the pane-resizer, and setTimeout() would offer no help, having the event triggering regardless, I sidesteped the problem using a steeper curve of the pane opening fx easing. This allows for the pane to open with a relativly slow start, and the resizer back-slide shows.

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100