JQUERY UI 中的淡入淡出效果在淡出时调用文档就绪功能答案

【问题标题】：fade effect in JQUERY UI calls document ready function on fadeoutJQUERY UI 中的淡入淡出效果在淡出时调用文档就绪功能
【发布时间】：2014-03-11 21:21:57
【问题描述】：

使用淡出效果如下：jQuery UI 中的$( "#specialBox" ).toggle( "fade" ) 会导致页面在淡出时重新加载吗？

顺便说一句，这似乎只有在我单击触发淡出的按钮时才会发生（而不是按回车键）。

{

<div id="specialBox"> //the elements who fade
  <p>Special box content ...</p> 
  <button onmousedown="toggleOverlay()">Close Overlay</button>
</div>



<input id = "addquery" type = "button" class = "test" value = "add query"></input> //triggering button

}

<html id= "thishtml">

    <head>

        <script  src = "jquery-2.1.0.js"></script>
        <link type = "text/css" rel = "stylesheet" href = "style.css"></link>
        <script type = "text/javascript" src = "graffjavs.js"></script>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>      


    </head>


    <body>

        <form id = "docy">
            <input id = "gtr" type = "text" class = "txt"></input>
            <input id = "graffbut" type = "button" class = "test" value = "test JQUERY"></input>
            <div  class = "out"   id="output">

            </div>
            <div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
  <p>Special box content ...</p> 
  <button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
            <input id = "addquery" type = "button" class = "test" value = "add query"></input>
        </form>
    </body>

</html>





function toggleOverlay(){
    var addquery = document.getElementById('addquery');
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(addquery.isClicked == "1"){
         addquery.isClicked = "0"
         $( "#specialBox" ).effect( "fade" );
         $( "#overlay" ).effect( "fade" );
        //overlay.style.display = "none";
        //specialBox.style.display = "none";
    } else {
          addquery.isClicked = "1"
          $( "#specialBox" ).toggle( "fade" );
          $( "#overlay" ).toggle( "fade" );
        //overlay.style.display = "block";
        //specialBox.style.display = "block";
    }
    }// triggered function causing the elements to fade 




function tog()
{
    document.getElementById('addquery').isClicked = "0"; 
    $('#addquery').click(function(){toggleOverlay();});
}//function that assigns the triggered function to the button

【问题讨论】：

可能是因为按钮在表单内。
是的，你能解释一下为什么会这样吗？
<button>元素的默认类型是submit，所以它提交表单。
Oscar 是对的，您的 <button> 元素是一个提交按钮，因为它没有指定 type 属性。

标签： javascript jquery jquery-ui animation effects

【解决方案1】：

你的按钮是一个提交按钮。这是，有type="submit"。当你按下它时，表单被提交。将属性更改为type="button"。

【讨论】：

然后有一些奇怪的地方。您可以发布放置此按钮的表单的 HTML 吗？
对不起，您是对的，忘记更改淡出按钮谢谢