Как переместить div в другой div с анимацией и разной шириной высоты - PullRequest
Новая
       6

Как переместить div в другой div с анимацией и разной шириной высоты

0 голосов
/ 14 апреля 2020

Я хочу создать анимацию, подобную этой CSS Анимация

из текущей структуры html 

<div class="row l-content-help" id="foto_tengah">
    <div class="col-md-12" align="center">
        <div id="img-container">
            <div class="bottom-right" id="caption-depan">
            <p class="caption-header" style="margin-bottom: -40px;"></p>
            <br>
            <p class="stats-number inline" data-stop="999"></p> &nbsp;
            <p class="caption-details inline"></p>
            </div>
        </div>
    </div>
</div>
<br>
<div class="row l-content-help">
    <div class="col-md-4" align="right">
        <img src="http://localhost/teckwrap/assets/img/upload/home_0602151948.jpg" class="img-depan" align="center" data-caption="Be Elegant" data-text="+Colors" data-num="159" data-infinity="0">
    </div>
    <div class="col-md-4" align="center">
        <img src="http://localhost/teckwrap/assets/img/upload/home_0602152011.jpg" class="img-depan" align="center" data-caption="Be Different" data-text="Ideas" data-num="999" data-infinity="1">
    </div>
    <div class="col-md-4" align="left">
        <img src="http://localhost/teckwrap/assets/img/upload/home_0602152026.jpg" class="img-depan" align="center" data-caption="Be Wild" data-text="Design" data-num="999" data-infinity="1">
    </div>
</div>

и js

$(document).ready(function(){
   $(".img-depan").click(function(){
     var new_img = $(this).attr('src');
     $(this).hide(500);
     $('.img-depan').not(this).each(function(){
       $(this).show(500);
     });
     $('#img-container').css("background-image",'url('+new_img+')');
   });
});

поэтому, когда я нажимаю 1 из 3-х дел ниже. он перемещается к идентификатору img-контейнера и заменяет фоновое изображение.

. это то, что я получил.

скрипка

Какой подход мне нужен? Чтобы переместить div в другой div вместо show () и hide (), как в скрипке

...