Question

我需要在点击后显示txt从图像下方很好地滑动。当用户点击其他图像时，之前的文本必须滑出（不可撕）。我根本不擅长javascript。现在我有这样的事情：

html的

getMaxMonthlySales: function(data) {
     return _(data)
         .map('values')
         .flatten()
         .groupBy('x')
         .map(o => _.sumBy(o, 'y'))
         .max();
}

的.js

<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>

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

});

从图像下滑动文本

1 个答案: