0

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

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

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

https://github.com/mitsuhiko/flask

（只需单击一个文件夹即可演示。唯一的区别是我想要的是正确的“幻灯片”。）

我有一个 ajax 调用，它返回一些 json 并用于替换 div。我大部分时间都在工作，但我无法弄清楚我将用于以下操作的 jquery：

  1. hide() 我想用 jqueryUI 'slide' 效果替换的现有 div
  2. 使用replaceWith替换内容（由于各种原因我不能使用html（）它需要replaceWith（）但保持隐藏
  3. 将一些 jquery 行为重新附加到新内容（此代码是 Drupal 特定的，但它是单行代码。它将其他 jquery 行为重新附加到新内容）并且内容仍然是隐藏的。
  4. 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/

4

1 回答 1

0

如果您使用容器来包装内容，这是一种解决方案。（归功于 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'
                });
            })()
        }
    });

});
于 2013-06-12T17:53:15.650 回答