反向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南根據需要。

讓我知道你是否需要任何修改。

Answer 2

嘗試像這樣，改變你的JavaScript代碼：

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

更改#txt CSS添加bottom: 0;。

CSS的top: 0;從#overlay撈出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; 
} 

Code here

你甚至可以添加一個bottom: 320px;到#txt讓它出現在你想。

Answer 3

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

你也可以指定方向的方式。