jquery - 反向 jQuery 高度动画

Question

我正在尝试制作一个透明的叠加层，点击时会在图像上显示一些文本。我已经得到它来制作动画，但我需要它自下而上而不是自上而下。

HTML
=======

    <!-- Element -->

    <div class="char">
    <div class="content">
      <p id="nesstxt">ness is the bess</p>
      <img id="ness" src="http://images3.wikia.nocookie.net/__cb20120802002608/ssb/images/2/25/Ness(Clear).png" />
      <div id="nessoverlay"></div>
    </div>

    <div class="content">
      <p id="pootxt">poo is my doo</p>
      <img id="poo" width="215px" height="369px" src="http://images4.wikia.nocookie.net/__cb20081118173625/earthbound/images/4/4b/Poo_Clay.png" />
      <div id="poooverlay"></div>
    </div>
    </div>

CSS
=======



    div.char{
        max-width:50%;
        margin: 0 auto;
      padding:0;
    }

    /*styling for effective overlay*/

    #nessoverlay,  #poooverlay"{
      height: 100%;
      background-color: black;
      opacity: 0.7;
      filter: alpha(opacity = 70);
      position: absolute;
      bottom: 0; left: 0; right: 0;
      display: none;
      z-index: 2; 
    }

    /*box that holds it together*/

    .content{
      width:215px;
      height:369px;
      position:relative;
      z-index:1;
      display:inline;
      padding:25px;
    }

    /*center txt and animate*/

    #nesstxt,  #pootxt{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 70%;
      color: white;
      display: none;
      z-index: 3;
    }

jQuery
=======
    $(document).ready(function (){
      $('#nessoverlay, #nesstxt, #ness').click(function (){
        $('#nessoverlay, #nesstxt').slideToggle();
      });
    });

    $(document).ready(function (){
      $('#poo,  #poooverlay, #pootxt').click(function (){
        $('#poooverlay, #pootxt').slideToggle();
      });
    });

Updated Codepen

另外，我需要大约 4 张内联叠加图片，但我不知道如何让它工作。任何帮助将不胜感激。

Answer 1

检查一下:http://codepen.io/anon/pen/EmauB

我对叠加层和内容使用了不同的布局。

例如使用了 4 张图片。

HTML 代码

<h1>jQuery Reverse Animation</h1>
<ul>
    <li>
        <img src='1.jpg' width='150px' height='300px' />
        <div>
            <p>Image 1</p>
        </div>
    </li>
    <li>
        <img src='2.jpg' width='150px' height='300px' />
        <div>
            <p>Image 2</p>
        </div>
    </li>
    <li>
        <img src='3.jpg' width='150px' height='300px' />
        <div>
            <p>Image 3</p>
        </div>
    </li>
    <li>
        <img src='4.jpg' width='150px' height='300px' />
        <div>
            <p>Image 4</p>
        </div>
    </li>
</ul>

CSS 代码

* {
    padding : 0;
    margin : 0;
}
body {
    width : 630px;
    margin : auto;
}
h1 {
    text-align : center;
    padding : 10px;
}
li {
    list-style-type : none;
    float : left;
    width : 150px;
    height : 300px;
    overflow : hidden;
    position : relative;
    margin-right : 10px;
}
li:last-child {
    margin-right : 0;
}
li div {
    position : absolute;
    top : 100%;
    bottom : 0;
    background-color : rgba(0, 0, 0, 0.5);
    width : 100%;
}
li div p {
    padding : 10px;
    color : #fff;
    text-align : center;
}

JavaScript 代码

$(function() {
    $('li div, li img').click(function() {
        var div = $(this).closest('li').find('div');
        if($(div).data('open') == 'true') {
            $(div).animate({top : "100%"});
            $(div).data('open', 'false');
        } else {
            $(div).animate({top : 0});
            $(div).data('open', 'true');
        }
    });
});

根据需要更改类/id 名称。

如果您需要任何修改，请告诉我。