Question

<div id="result">Fade me in and hide div hideme</div>
<div id="hideme">
    <form method="POST">
        YES <input type="radio" name="name" value="yes" />
        NO <input type="radio" name="name" value="no" checked />
        <p />
        <input type="submit" id="submit" name="submit" value="HIDE NOW!" />
    </form>
</div>
<script>
    $(document).ready(function() {
        $('#result').hide();
        $('#submit').click(function() {
            $('#hideme').hide();
            $('#result').fadeIn(5000);
        });
    });
</script>

以下是jsfiddle

为什么在点击和淡出div

后第二个隐藏不起作用

Answer 1

您必须使用.preventDefault()来阻止submit按钮的默认行为。或者使用普通按钮（type='button'）代替提交按钮。

尝试，

$(document).ready(function () {
        $('#result').hide();
        $('#submit').click(function(e) {             
            e.preventDefault();
            $('#hideme').hide();
            $('#result').fadeIn(5000);
        });
    });

DEMO

Answer 2

要发布您需要AJAX并阻止默认不提交也不要在表单提交中调用任何内容

$(function() {
  $('#result').hide();
  $('#form1').on("submit", function(e) {
    e.preventDefault(); // stop form submission
    $('#hideme').hide();
    $.post(this.action, { "name": $("input[name='name']").val()},function(data) {
      $('#result').html(data).fadeIn(5000);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">Fade me in and hide div hideme</div>
<div id="hideme">
  <form id="form1" method="POST" action="someaction.php">
    YES <input type="radio" name="name" value="yes" /> NO <input type="radio" name="name" value="no" checked />
    <p />
    <input type="submit" value="HIDE NOW!" />
  </form>
</div>

点击时隐藏div

2 个答案:

DEMO