1

jQueryスライド効果を使用して、新しく追加されたコンテンツをスライドさせる機能を実行しようとしていますが、2つのdivを1行に配置するソリューションを適用できません。左から右に横にスライドするように以下のコードを修正するにはどうすればよいですか? たぶん、このコードは完全に再構築されるのでしょうか?

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;
}
4

1 に答える 1

0

これに編集

$(outElement).effect("slide", hideoptions, 0);
    $(inElement).effect("slide", showoptions, 0);
于 2012-11-07T11:48:31.287 に答える