Скользящий текст из-под изображения

Question

Мне нужно показать, как txt приятно скользит из-под изображения после щелчка. Когда пользователь нажмет на другое изображение, предыдущий текст должен выдвинуться (не допустим). Я плохо разбираюсь в javascript. Теперь у меня есть что-то вроде этого:

.html

<a href="#" class="show_hide"><img src="image.jpg" width="100%" height="100px;"></a> 
<div class="slidingDiv"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div> 
</div> 
<a href="#" class="show_hide"><img src="image.jpg" width="100%" height="100px;"></a> 
<div class="slidingDiv"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div> 
</div> 

.js

$(document).ready(function() { 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function() { 


     var isvisible = $(this).next('.slidingDiv').is(':visible'); 

     if (isvisible) { 
      $(this).next('.slidingDiv').hide(); 
     } else{ 
      $(this).next('.slidingDiv').show(); 
     } 
    }); 

}); 

https://jsfiddle.net/Elfiszcze/49vd6d6k/2/

Может кто-нибудь помочь мне с этим?

Answer 1

При использовании JQuery hide() и show() вы можете установить параметр duration, который будет использоваться в продолжительности анимации, see jquery docs. Например, 500 миллисекунд:

$(document).ready(function() { 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function() { 

     //hide all sliding divs 
     var arrayLikeOfSlidingDivs = $('.slidingDiv'); 
     arrayLikeOfSlidingDivs.each(function(){ 
      if ($(this).is(':visible')){ 
       $(this).hide(500); 
      } 

     }); 

     var isvisible = $(this).next('.slidingDiv').is(':visible'); 

     if (isvisible) { 
      $(this).next('.slidingDiv').hide(500); 
     } else{ 
      $(this).next('.slidingDiv').show(500); 
     } 
    }); 

});