"обратный" эффект анимации
здравствуйте!
столкнулся с проблемой. собственно, вот эллемент: http://jsfiddle.net/avanesov89/me9ed/ при нажатии внизу на "ссылка" блок контента сверху вниз покрывается темно-синим фоном и с формочкой. Вроде все хорошо, все отлично. Как сделать, чтобы этот фон шел снизу вверх? код скрипта находится там же. заранее спасибо! к сожалению, обратиться больше не к кому. |
avanesov89,
:write: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> - jsFiddle demo by avanesov89</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <style type='text/css'> #wrapper .info {width:1240px;margin:50px auto;height:900px;} #wrapper .info img {display:block;margin:0 auto;} #wrapper .info a {color:#cc3333;font-style:italic;font-size:14px;} #wrapper .info a:hover {text-decoration:underline;} #wrapper .info form {margin:0 auto;width:250px;} #wrapper .info input {background:#fff;height: 35px;width:190px;border:none;padding-left:10px;font: 300 20px/24px'Open Sans condensed',sans-serif;color:#1b3647;margin:10px 0;} #wrapper .info textarea {width:240px;border:none;padding-left:10px;font: 300 20px/24px'Open Sans condensed',sans-serif;color:#1b3647;margin:10px 0;height:150px;} #wrapper .info button {background:#cc3333;border:none;text-align: center;height:35px;font:300 20px/20px'Open Sans',sans-serif;color:#fff;padding:0 5px;cursor:pointer;} #wrapper .info .title {font-size:22px;line-height:34px;padding-left:10px;} #wrapper .info .content {height:272px;color:#1b3647;font-size:14px;padding:10px;} #wrapper .info .all {height:20px;color:#fff;padding:5px 10px;font-size:14px; position: relative; margin: 0px;} #wrapper .info .all a {color:#fff;float:right;cursor:pointer;} #wrapper .info span {display:block;} #wrapper .info .all .forma {background:#1B3647;height:293px;left:-10px;width:380px;margin-top: -20px; position: relative ; display: none;} #wrapper .info .left {height:365px;width:380px;float:left;} #wrapper .info .left .title {color:#d06503;border-bottom:7px solid #d06503;} #wrapper .info .left .content p {border-bottom:1px solid #d06503;padding: 10px 0;} #wrapper .info .left .content p span {display:block;font-size:16px;text-align:right;} #wrapper .info .left .all {background:#d06503;} #wrapper .info .left .all span {float:right;} </style> <script> $(document).ready(function(){ $(".hider").click(function(){ $("#hidden:visible").stop().animate({"height": "hide","margin-top": "-20"}, 1000); $("#hidden:hidden").stop().animate({"height": "show","margin-top": "-314"}, 1000); return false; }); }); </script> </head> <body> <div id="wrapper"> <div class="info"><div class="left"> <div class="title">О нас говорят</div> <div class="content"> <p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p> <p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p> <p>Данная модель отлично подошла для увеличения производственности погрузчиков<span>Иван, ООО "Компания"</span></p> </div> <div class="all"> Все новости <a class="hider">Ссылка</a> <div id="hidden" class="forma" > Для нас важно знать ваше мнение <form onsubmit="return sendForm('10');" id="buyform10"> <input type="text" name="name" placeholder="Ваше имя"> <textarea type="text" name="name" placeholder="Ваше сообщение"></textarea> <button>Отправить</button> </form> </div> </div> </div></div></div> </body> </html> |
|
nice_try,
:blink: |
большое вам спасибо!!!
|
Часовой пояс GMT +3, время: 07:46. |