从图像下方滑动文字

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()您可以设置将在动画的持续时间，see jquery docs使用的参数duration。例如，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); 
     } 
    }); 

});