Javascript jQueryUI中的淡出效果在淡出时调用文档准备函数_Javascript_Jquery_Jquery Ui_Animation_Effects

Javascript jQueryUI中的淡出效果在淡出时调用文档准备函数

javascript jquery jquery-ui animation

Javascript jQueryUI中的淡出效果在淡出时调用文档准备函数,javascript,jquery,jquery-ui,animation,effects,Javascript,Jquery,Jquery Ui,Animation,Effects,按如下方式使用淡入效果：$（“#specialBox”）。在jQuery UI中切换（“淡入”）是否会导致页面淡出时重新加载顺便说一句，这似乎只有在我点击触发淡出的按钮时才会发生（而不是按enter键） { //褪色的元素特殊盒子内容… 紧密覆盖 //触发按钮 } 特殊盒子内容… 紧密覆盖函数toggleOverlay（）{ var addquery=document.getElementById（'addquery'）； var overlay=document.getElement

按如下方式使用淡入效果：

$（“#specialBox”）。在jQuery UI中切换（“淡入”）

是否会导致页面淡出时重新加载

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

{

//褪色的元素
特殊盒子内容…
紧密覆盖
//触发按钮

}


特殊盒子内容…
紧密覆盖
函数toggleOverlay（）{
var addquery=document.getElementById（'addquery'）；
var overlay=document.getElementById（'overlay'）；
var specialBox=document.getElementById（'specialBox'）；
overlay.style.opacity=.8；
如果（addquery.isClicked==“1”）{
addquery.isClicked=“0”
$（“特殊盒子”）。效果（“褪色”）；
美元（“#叠加”）。效果（“褪色”）；
//overlay.style.display=“无”；
//specialBox.style.display=“无”；
}否则{
addquery.isClicked=“1”
$（“#特殊框”）。切换（“淡入”）；
$（“#覆盖”）。切换（“淡入”）；
//overlay.style.display=“块”；
//specialBox.style.display=“块”；
}
}//触发功能导致元素褪色
函数tog（）
{
document.getElementById（'addquery'）.isClicked=“0”；
$（'#addquery'）。单击（函数（）{toggleOverlay（）；}）；
}//将触发功能分配给按钮的功能

您的按钮是一个提交按钮。这就是，具有

type=“submit”

。当您按下该按钮时，表单即被提交。将属性更改为

type=“button”

可能是因为按钮在表单中。是的，您能解释为什么会发生这种情况吗？

元素的默认类型是

submit

，因此它提交表单。Oscar是对的，您的

元素是一个提交按钮，因为它没有指定

类型

属性。你能发布这个按钮所在表单的HTML吗？对不起，你是对的，忘记更改淡出按钮了，谢谢

<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