Question

使用淡入淡出效果如下：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

Answer 1

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

JQUERY UI中的淡入淡出效果在淡出时调用文档就绪函数

1 个答案: