表单不会提交

我试图将表单移动几个像素，这不起作用。 我不知道为什么。

我提交时调用该函数（我已使用alert（）测试它），但css部分不起作用。

这是代码：

          $(document).ready(function () { $("#formulario").submit(function (event) { $(this).css({ top: -50 px; }); }); });   body, p { font-family: 'Source Sans Pro'; font-size: 30px; line-height: 15px; letter-spacing: 0px; font-weight: bold; } #container { width: 100%; height: 100%; margin: 0px; padding: 0px; } #contenido { width: 50%; min-width: 300px; margin-left: 60px; letter-spacing: -1px; padding: 20px 0 0px 0; } #texto { padding: 20px; margin-top: 30px; } #texto p { margin: 0px; padding-bottom: 20px; } #nombre { font-family: 'Special Elite'; font-size: 30px; padding-top: 15px; border: 0px; } #imagen { vertical-align: text-top; width: 50%; float: right; } input:focus { outline: 0 !important; }    
 
 
 
 
Hola, soy Luis.
 
Bienvenido a mi web personal.
 
Antes de nada,
 
¿podrías indicarme tu nombre?
  
 
 
 
  

代码的实时版本：

http://www.luisalmerich.com/

Answer 1

您正在使用没有任何position属性的css top 。 尝试使用absolute或relative位置

 $(document).ready(function () { $("#formulario").submit(function (event) { $(this).css({ top: '-50px', position: 'relative' }); }); }); 

如果您不想更改position属性，可以修改margin-top属性

 $(document).ready(function () { $("#formulario").submit(function (event) { $(this).css({ marginTop: '-50px' }); }); }); 

最后，请注意，当表单提交时，页面会重新加载，因此您很可能只会暂时看到此更改。 如果您return false ，页面将不会重新加载（尽管这可能不是您想要的）

 $(document).ready(function () { $("#formulario").submit(function (event) { $(this).css({ marginTop: '-50px' }); return false; }); }); 

Answer 2

你能尝试添加position: relative; 也

  $("#formulario").submit(function (event) { $(this).css({ position: "relative", top: "-50px" }); }); 

Answer 3

如果你想让它与.animate（）一起使用，试试这个：

 $(document).ready(function () { $("#formulario").submit(function (event) { event.preventDefault(); $(this).css('position', 'relative') .animate({top: '-50px'}, 5000, function () { // Animation complete. }) }); });