javascript - 如何在单行中交替滑出和滑入两个div？

Question

我正在尝试使用 jQuery 幻灯片效果来实现滑动新添加内容的功能，但我无法应用任何解决方案将两个 div 放在一行中。如何修复下面的代码以并排从左向右滑动？也许这段代码是完全要重建的？

jsFiddle: jsfiddle

JS:

$(function() {
    $("#hello").html("Hello");
    $('#edit').toggle(function() {
        var newhtml = '<input type="text" id="hello_input" value="" />';
        slideNewContent(newhtml);
    }, function() {
        var newhtml = $("#hello_input").val();
        slideNewContent(newhtml);
    });
});

function slideNewContent(c) {
    $("#slideOut").empty();
    $("#slideIn").children().clone().appendTo("#slideOut");
    $("#slideIn").find("#hello").html(c);
    var slideOut = $("#slideOut");
    var slideIn = $("#slideIn");
    slideOutIn(slideOut, slideIn);
}

function slideOutIn(outElement, inElement) {
    var hideoptions = { "direction": "right", "mode": "hide" };
    var showoptions = { "direction": "left", "mode": "show" };
    $(outElement).effect("slide", hideoptions, 1000);
    $(inElement).effect("slide", showoptions, 1000);
}

HTML:

<div class="span3">
    <div id="slider">
        <div id="slideIn" class="content">
            <span>       
                <span id="hello"></span>
                <button class="btn btn-mini" id="edit">Edit</button>
            </span>           
        </div>
        <div id="slideOut" class="content"></div>
    </div>
</div>​

CSS:

#slider {
  /*float:left;*/
    display: inline-block;
}
#slideIn {
   width: 270px;
  /*display: inline;*/
}
#slideOut {
    width: 270px;
  /*display: inline;*/
}
#hello_input {
  width:160px;
}

Answer 1

对此进行编辑

$(outElement).effect("slide", hideoptions, 0);
    $(inElement).effect("slide", showoptions, 0);