javascript - 从图像下方滑动文本

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); 
        }
    });

});