从图片下方滑动文字 [英] Sliding text from under image

问题描述

点击后，我需要从图片下方很好地显示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/

有人可以帮我吗?

解决方案

使用jquery hide()和show()时，可以设置将在动画持续时间中使用的参数duration，

I need to show txt nicely sliding from under image after click. When user will click on other image, previous text have to slide out (not be vissible). I am not good in javascript at all. Now I have something like this:

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

Could someone help me with this one?

解决方案

When using jquery hide() and show() you can set the parameter duration that will be used in animation duration, see jquery docs. For example, 500 miliseconds:

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

});

这篇关于从图片下方滑动文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！