重新打开没有双重动画的 SqueezeBox答案

【问题标题】：Re-open SqueezeBox without double animation重新打开没有双重动画的 SqueezeBox
【发布时间】：2013-01-29 19:17:17
【问题描述】：

我在屏幕上有一个打开的SqueezeBox，并希望使用不同的 URL 重新打开它，以响应单击框中的链接。我正在尝试各种方法以新（不同）大小打开新 URL，以便动画流畅且只运行一次。不幸的是，标准方法（open 方法）似乎动画两次（或运行无意义的“故障”动画）。

作为替代方案，我正在尝试 setContent，但这似乎没有提供设置选项的方法，据我所知，in the source、SqueezeBox.initialize 在选项已经存在后不会做任何事情设置。

    // (Attempt 1)
    // This animation is a bit glitchy, have tried resetting resizeFx
    // and sizeLoading to reduce bounce. Ideally want it to morph from
    // current size to size{} without shrinking to sizeLoading{} first.
    if ( false ) {
        SqueezeBox.open(
            url,
            {
                size: { x: 500, y: 500 },
                sizeLoading: { x: 500, y: 500 },
                resizeFx: {
                    duration: 0
                }
            }
        );
    }

    // (Attempt 2)
    // Empty SqueezeBox then reset its contents
    $( 'sbox-content' ).empty();
    // Unfortunately here there appears no way to reset the size with
    // the ajax method,
    // and the call to initialize is ignored.
    SqueezeBox.initialize(
        {
            size: { x: 100, y: 400 },
            /* Set the loading size to the current size? */
            sizeLoading: { x: 700, y: 700 }
        }
    );
    // Load the new content in via ajax
    SqueezeBox.setContent( 'ajax', url );
    // So, I would need to call resize() here, causing a second animation

我 see here 建议切换到另一个模态灯箱插件，但离开 SB 并不是一个真正的选择，而且我不想同时运行这两个插件。

【问题讨论】：

标签： javascript animation mootools squeezebox

【解决方案1】：

啊哈，这是一个解决方案 - 避免 SqueezeBox 调用！相反，我使用标准的 MooTools AJAX 调用手动加载内容。这不会打开通常的等待微调器，但我希望可以修复。

// Let's load page in AJAX manually; reopening with open() or
// setContents() appears to cause double or glitchy animations.
var myRequest = new Request.HTML(
    {
        url: url,
        method: 'get',
        evalScripts: true,
        update: $( 'sbox-content' )
    }
).send();

// @todo If no size change is needed don't run this
// to avoid glitchy animation
SqueezeBox.resize(
    { x: 500, y: 500 },
    false
);

请注意，我使用的是 evalScripts: true，因此可加载 sn-p 中的任何 JavaScript 都可以像使用 SqueezeBox.open() 一样运行。

【讨论】：