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

更新了 Codepen

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

Answer 1

像这样尝试，将您的 javascript 代码更改为：

$(document).ready(function (){
  $('#overlay, #txt, #ness').click(function (){
    $('#overlay, #txt').slideToggle();
  });
});

更改#txtcss 添加bottom: 0;.

从#overlaycss 中删除top: 0;并设置height: 100%; width: 100%;

CSS

/*styling for effective overlay*/

div#overlay{
  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;
  margin: 0 auto;
}

/*center txt and animate*/

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

代码在这里

您甚至可以添加一个bottom: 320px;to#txt以使其显示在您想要的位置。

Answer 2

您可以使用 jquery UI： http ://api.jqueryui.com/slide-effect/

这样你也可以指定方向。

Answer 3

看看这个：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 名称。

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