Question

我有div转换的问题。我有2列图像框。当用户点击框时，框旁边会显示框说明。我希望框能够以这样的方式设置动画：如果隐藏的描述框出现，它替换的图像将动画并移动到下一行。这就是我所拥有的。

＆＃13;

jQuery(document).ready(function(){
  jQuery('.member-image').click(function(){
    var attr = jQuery(this).attr('data-image');
    jQuery('.member-description').fadeOut();
    jQuery('div[data-description="'+ attr + '"]').fadeIn().css('display', 'inline-block');
  });
  
});

＆＃13;

.member-image,
.member-description{
    display: inline-block;
    width: 49%;
    vertical-align: middle;
    padding: 10px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.member-description{
  display: none;
}

＆＃13;

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


<div class="member-image" data-image="1">
  <img src="https://placeimg.com/640/480/any" class="img-fluid"> 
</div>

<div class="member-description" data-description="1">
  <h5>Lorem Ipsum Dolor Sit Amet</h5>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="member-image" data-image="2">
  <img src="https://placeimg.com/640/480/any" class="img-fluid"> 
</div>

<div class="member-description" data-description="2">
  <h5>Lorem Ipsum Dolor Sit Amet</h5>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="member-image" data-image="3">
   <img src="https://placeimg.com/640/480/any" class="img-fluid"> 
</div>

<div class="member-description" data-description="3">
  <h5>Lorem Ipsum Dolor Sit Amet</h5>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="member-image" data-image="4">
   <img src="https://placeimg.com/640/480/any" class="img-fluid"> 
</div>

<div class="member-description" data-description="4">
  <h5>Lorem Ipsum Dolor Sit Amet</h5>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="member-image" data-image="5">
   <img src="https://placeimg.com/640/480/any" class="img-fluid"> 
</div>

<div class="member-description" data-description="5">
  <h5>Lorem Ipsum Dolor Sit Amet</h5>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="member-image" data-image="6">
   <img src="https://placeimg.com/640/480/any" class="img-fluid"> 
</div>

<div class="member-description" data-description="6">
  <h5>Lorem Ipsum Dolor Sit Amet</h5>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

＆＃13;

这就是我想要实现的目标。 Moving DIVs

关于如何改进代码的任何想法？

感谢。

将动画添加到div

0 个答案: