2013-08-02 2 views
1

Я пытаюсь сделать прозрачное наложение с некоторым текстом, появляющимся над изображением при щелчке. Я получил его, чтобы сделать анимацию, но мне нужно, чтобы она была снизу вверх, а не сверху вниз.Reverse jQuery Height Animation

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 из фотографий с наложением рядный, которые я не могу понять, как заставить его работать. Любая помощь будет очень оценена.

+0

Вы должны подумать о том, чтобы задать другой вопрос вместо того, чтобы его редактировать, изменяя весь вопрос. – sergioadh

ответ

0

Проверьте это: 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'); 
     } 
    }); 
}); 

Изменить класс/NAM идентификатор при необходимости.

Дайте мне знать, если вам нужны какие-либо изменения.

+0

Это именно то, что я искал! Спасибо! – youngandensniper

0

Попробуйте это так, измените яваскрипт код:

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

Измените #txt CSS, добавив bottom: 0;.

Удалить из #overlay КАС, 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; 
} 

Code here

Вы даже можете добавить bottom: 320px; к #txt, чтобы сделать вид, где вы хотели.

+0

Спасибо! Это определенно очистило мой код! Но мне все еще нужно, чтобы он расширялся снизу вверх. Можете ли вы придумать, как это сделать? – youngandensniper

+0

как насчет начала оверлея и текста с нижним: 0; Проверьте обновленный код. – sergioadh

+0

Ваша помощь поразительна! Последний вопрос, хотя, как только я добавляю еще один «img» на страницу, он перестает нормально работать. Я добавил обновленный код к вопросу. – youngandensniper