簡體   English   中英

JQUERY UI中的淡入淡出效果會在淡出時調用文檔准備功能

[英]fade effect in JQUERY UI calls document ready function on fadeout

是否使用如下淡入淡出效果:jQuery UI中的$( "#specialBox" ).toggle( "fade" )導致頁面淡出時重新加載頁面?

順便說一句,這似乎僅在單擊觸發淡出的按鈕時才發生(而不是按Enter)。

{

<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

您的按鈕是一個提交按鈕。 這是type="submit" 當您按它時,將提交表單。 將屬性更改為type="button"

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM