Arbeiten mit JQuery Append und Folie

Ich habe Probleme, alte div nach dem Anhängen des Inhalts dieser div zu einem div.Ich möchte alte div nach rechts schieben und zeigen Sie die neue div mit Inhalt jedes Mal, wenn ich auf Hinzufügen mehr Schaltfläche klicken .Arbeiten mit JQuery Append und Folie

Meine Html-Code:

<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>

Das ist, was ich bisher versucht ... Mein javascript:

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

Danke

Quelle

2016-11-12 pallavi mishra

Bitte führen Sie diesen Code-Schnipsel, ich denke, das wollen Sie erreichen wollen.

Aus Ihrer Frage,

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

<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>

Here is the fiddle

Quelle

2016-11-12 07:54:00 Sravan

es nicht das, was No i wanted.it nur hinzugefügt wird once.but ich will Jedes Mal, wenn ich auf "Mehr hinzufügen" klicke, wird es angehängt und verschoben. –

Okay, ich werde meine Antwort aktualisieren. – Sravan

Bitte erläutern Sie Ihre Frage, wollen Sie die gleiche Funktionalität jedes Mal passieren? – Sravan

dieses Fiddle Versuchen kann es helfen kann, Sie -

JSFiddle

HTML-Code -

<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-Code -

$(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"); 
});

Quelle

2016-11-12 07:49:15

Arbeiten mit JQuery Append und Folie

Antwort

Verwandte Themen