Question

更新：这是一个显示问题的JSFIDDLE

我正在尝试做类似于github的文件浏览器。

（只需点击一个文件夹进行演示。唯一的区别就是我想要的是一个正确的'幻灯片'来展示。）

我有一个ajax调用，它返回一些json，用于替换div。我有它主要工作但我无法弄清楚我会用于以下的jquery：

使用jqueryUI'slide'效果隐藏（）我想要替换的现有div
使用replaceWith替换内容（由于各种原因，我不能使用html（），它需要替换为（）但保持隐藏
将一些jquery行为重新附加到新内容（此代码是Drupal特定的，但它是一个单行。它将其他jquery行为重新附加到新内容上）并且内容仍然是隐藏的。
show（）带有jqueryUI'slide'效果的新div

我尝试过很多不同的事情。我知道ajax是异步的，所以我需要在回调中运行它或链接行为。到目前为止，我对此表示赞同：

/* this snippet occurs in an $.ajax success: function, argumentWrapper is the div
wrapper to replace, newContent is the new html that will be inserted */

argumentWrapper.hide({
    effect: 'slide',
    direction: 'left',
    complete: function() {
         argumentWrapper.replaceWith(function() {
              return $(newContent).hide({
                   complete: function(){
                        Drupal.attachBehaviors(newContent);
                   }
              }).show({
                   effect: 'slide',
                   direction: 'right'
              });
         });
    }
});

这几乎可以工作，但在它滑回之前我会得到一个奇怪的“聚合”效果。就像在左侧有一个非常div的暂停。

更新：这是一个显示问题的JSFIDDLE

http://jsfiddle.net/JPqhz/1/

Answer 1

如果您使用容器来包装内容，这是一个解决方案。（感谢freenode #jquery中的chinoto）：

http://jsfiddle.net/JPqhz/7/

   var
    $container=$('#container')
    ,wrapper = $("#wrapper")
    ,newContent = '<div id="dynamic">This is new information<div class="clickme"></div></div>';


$container.on('click','.clickme',function(event) {
    $container.hide({
        effect: 'slide',
        direction: 'left',
        complete: function () {
            (function() { //put me in post function
                wrapper.html(newContent);
                //Drupal reattach behaviors goes here
                $container.show({
                    effect: 'slide',
                    direction: 'right'
                });
            })()
        }
    });

});

使用ajax：隐藏div，替换，重新附加行为然后显示

1 个答案: