Question

在将div的内容附加到div后，我无法隐藏旧的div。我希望旧的div向右滑动并在每次点击添加更多按钮时显示带有内容的新div。

我的Html代码：

<div id="div_2">
    this is div 2 
    <form class="this_form"> 
        <input type="button" value="buttons"  />
    </form> 
</div>

<div id="show_form">    
</div>

<button class="pull-right" type="button" id="btns">add more</button>

这是我到目前为止所尝试的...... 我的javascript：

$("body").on("click","#btns",function(){
  $("#show_form").append($("#div_2").html()); 
  $('#show_form').hide("slow");
  $('#div_2').show("slow");
} );

谢谢

Answer 1

请运行此代码段，我认为这是您希望实现的。

从你的问题，

<强> I want old div to slide right and show the new div with content

＆＃13;

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").on("click",".btns",function(){
//$(".show_form").html('')
  $(".show_form").append($(".div_2").html()); 
//  $('#div_2').hide("slow");
$('.div_2').animate(
                        {
                            'margin-left':'1000px'
                        },function(){
                            $(".div_2").remove()
                            $('#show_form').attr("id","div_2");
                           $('#div_2').addClass('div_2');
                           $('#div_2').removeClass('show_form');
                            $( "#div_2" ).after(function() {
  return "<div id='show_form' class='show_form'></div>"
});
$('#show_form').addClass('show_form')

                        })
  $('.show_form').show("slow");
} );
});
</script>
</head>
<body>
<div id="div_2" class="div_2">
   this is div 2 
    <form class="this_form"> 
         <input type="button" value="buttons"  />
    </form> 
</div>                 

<div id="show_form" class="show_form">    
</div>
<button class="pull-right btns" type="button" id="btns">add more</button>


</body>

＆＃13;

Here is the fiddle

Answer 2

试试这个小提琴可能对你有帮助 -

JSFiddle

HTML代码 -

<div id="div_2">
    this is div 2
    <form class="this_form">
        <input type="button" value="buttons" />
    </form>
</div>

<div id="show_form">
</div>
<button class="pull-right" type="button" id="btns">add more</button>

JAVASCRIPT代码 -

$(document).ready(function(){
    $('#div_2').hide();
});

$("body").on("click", "#btns", function() {
    $("#show_form").html($("#div_2").html());
    $('#show_form').hide("slide", { direction: "right" }, 2500);
    $('#div_2').show("slow");
});

使用JQuery追加并滑动

2 个答案: