gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 18:56:46 25 4
gpt4 key购买 nike

我正在尝试使用 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;
}

最佳答案

对此进行编辑

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

关于javascript - 如何在单行中交替滑出和滑入两个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13268894/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com