CSS3 Animate / Translate DIV через onClick с помощью кнопки «Отправить»

Question

Я хотел бы посмотреть, сможет ли кто-нибудь направить меня в правильном направлении для достижения следующих целей:

Когда пользователь нажимает кнопку ОТПРАВИТЬ, DIV WRAP, содержащая форму, соскользнет по горизонтали на страницу (т. Е.Контейнер 100% ширины), показывающий НОВЫЙ DIV внизу (подтверждение подтверждения).Конечно, все z-index'd и многоуровневое.

Кто-нибудь с предложениями CSS3?

Большое спасибо, как всегда.

Приветствия,

Эрик

Answer 1

Вы можете сделать что-то вроде этого: ( демо )

//HTML
<div id="container">
    <div id="wrap">
        <form id="myform">
            ...
        </form>
    </div>
    <div id="new">
        Thanking you!! :)
    </div>
</div>
//CSS
  #container {
    height:100px;
    width:200px;
    position:relative; /* set position so #wrap can position correctly */
  }
  #new {
    width:100%; /* optional, fills up the container once the #wrap has gone */
    height:100%; /* same here */
  }
  #wrap {
    background:#FFF; /* set background so you dont see the overlapping */
    position:absolute; /* position it to the relative block */
    width:100%; /* make it just as big */
    height:100%;
    z-index:10; /* set it on top */
    overflow:hidden; /* prevent awkward animation when sliding horizontal */
  }
 // JS
$(function(){
  $('form').submit(function(){
    $('#wrap').animate({width:0},400); // add fading by adding opacity:0
    return false;
  });
});
​

Answer 2

Я создал эту демонстрацию для вас, используя jQuery:)

Вот код, который используется:

$('#myform :submit').click(function(){
   // your code - use ajax to submit the form

  $(this).parent('#frm').slideUp('slow', function(){
    $('#success').slideDown('slow');
  });

  return false;

});

и образец HTML-кода:

  <form id="myform">
    <div id="frm">
      <input type="text" /><br />
      <textarea cols="50" rows="10"></textarea><br />
      <input type="submit">
    </div>
  </form>

  <div id="success">Thanks form submitted !!</div>