javascript - Adding SlideUp and slidedown animation on replaceWith in jQuery -

i making app showcase site. have page full width vertical slides . added fixed phone on screen. want add image on phone when user slide using button.

when press button jquery remove current image phone , add new image in sliding manner. have found tutorial on codyhouse https://codyhouse.co/demo/app-introduction-template/index.html#cd-product-tour.

it's tutorial not able in vertical way. code of slides

    <div id="allslides">         <div  id="1" class="slides" phone_image='its url of image going added on phone when slide active  '>                <h1>my appp</h1>             <p class='content'>some content</p>                  </div>        <div  id="2" class="slides" phone_image='its url of image going added on phone when slide active  '>                 <h1>my appp</h1>             <p class='content'>some content</p>                  </div> <div  id="3" class="slides" phone_image='its url of image going added on phone when slide active  '>                <h1>my appp</h1>             <p class='content'>some content</p>                  </div> <div  id="4" class="slides" phone_image='its url of image going added on phone when slide active  '>                <h1>my appp</h1>             <p class='content'>some content</p>                  </div>     </div> 

i give .slides width , height 100%. slider working great , phone fixed on screen perfectly. want phone image change on every slide , effect should same on link vertical way.

my navigation button code this

<div id="navigation">                 <ul> <li><a href="#" class="bullets" id="bullet1" onclick="slider(1)"></a></li> <li><a href="#" class="bullets" id="bullet2" onclick="slider(2)"></a></li> <li><a href="#" class="bullets" id="bullet3" onclick="slider(3)"></a></li> <li><a href="#" class="bullets" id="bullet4" onclick="slider(4)"></a></li>                 </ul>     </div> 

the phone of html

 <div class="phone">             <div class="cd-image-container">                 <div>                     <div class="cd-phone-frame"></div>                     <div class="cd-image-wrapper">                      </div>                 </div>             </div>              </div> 

the jquery using

$(document).ready(function(){ $(".bullets").first().addclass('activebullet');              var image = $("#1").attr('phone_image');             $('.cd-image-wrapper').prepend('<img src="'+image+'"data-video="video/video-2" alt="screen preview 2">');             settimeout(function(){                 $('.cd-image-wrapper img').slidedown("fast");             },1); });  slider function   function slider(n){  var id = $(".activediv").attr("id");             var sid= id.split("slide");              var new_id = sid[1];              if(new_id == n){              }else{                   $(".slides").removeclass('activediv');                 $("#slide"+n).addclass('activediv');                  var top = $("#slide"+n).position().top;                  $("#mainbar").css({'top':-top});                  $(".bullets").removeclass('activebullet');                 $("#bullet"+n).addclass('activebullet');        $('.cd-image-wrapper img').fadeout("slow", function(){                     var images = $("#"+id).attr('phone_image');                     var div = $('<img src="'+images+'"data-video="video/video-2" alt="screen preview 2">').hide();                     $(this).replacewith(div);                     $('.cd-image-wrapper img').fadein("slow");                 });              }                                    }  

as can see able make phone image change effect in fadeout , fadein manner. can tell me how in slidedown , slideup way?

not quite understand mean. can't add comment write here.
if mean want click button , div slide. can use css animate animate.css

first make div want slidein position:absolute top:100%;
, div want slideout position:absolute top:0;

then when click button add css animate class slidein div make top:0, slideout div top: -100%; work , can add other animation change opacity it.

it's easy use css animate here using css animations