0

ドキュメントをクリックするとフェード効果で非表示になるように div を設定しました。任意の場所をクリックすると非表示になりますが、別のクリックで再び表示されてから非表示になるという問題があり、別のクリックでは再表示されません。

私はこのようにしてみました。

Javascript コード

    <script type="text/javascript">
var fired = false;
if(!fired){
document.onclick=function(){close_box_fadeOut()};
delete this.onclick;
}var fired = true;
function close_box(){
    document.getElementById("search-result").style.display="none";
}
function close_box_fadeOut(){
    setOpacity( 100 );
    document.getElementById("search-result").style.display="block";
    fadeOut();
    setTimeout(close_box, 800);
}
function setOpacity( value ) {
 document.getElementById("search-result").style.opacity = value / 10;
 document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeOut() {
 for( var i = 0 ; i <= 100 ; i++ ) 
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
</script>
enter code here

html コード

<div id="search-result"></div>

およびCssコード

<style>
  #search-result{
width: 500px;
height: 25px;
background:#069;
border: 5px solid #000;
display: block;
   }
</style>

これを行うための可能な方法を見て提案してください。

ありがとう

インスタント検索コード

    function showResult(str)
{
if (str.length==0)
{
document.getElementById("search-result").innerHTML="";
document.getElementById("search-result").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("search-result").innerHTML=xmlhttp.responseText;
document.getElementById("search-result").style.border="1px solid #A5ACB2";
document.getElementById("search-result").autocomplete="off";
document.getElementById("search-result").style.display="block";
var fired  = false;
var fade = false;
document.onclick = function(){
close_box_fadeOut();
if(!fade){
document.getElementById("search-input").onmouseenter = function(){
show_box_fadeIn()
delete this.onmouseenter;};
  };
}
document.getElementById("search-input").onmouseleave = function(){
var fade = true;
if(fade){
document.getElementById("search-input").onmouseenter = function(){
show_box()};
 };
}
document.getElementById("search-input").onclick = function(e){
    if(!e) {
    e = window.event;
    }

    if(e.stopPropagation && e.preventDefault) {
    e.stopPropagation();
    e.preventDefault();
    } else {
    e.cancelBubble = true;
    e.returnValue = false;
    }show_box(); return true;
};
}
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}
function close_box(){
document.getElementById("search-result").style.display="none";
}

function close_box_fadeOut(){
if(fired ){
return;
}
fired = true;
setOpacity( 100 );
document.getElementById("search-result").style.display="block";
fadeOut();
setTimeout(close_box, 800);
}
function show_box(){
document.getElementById("search-result").style.display="block";
}
function show_box_fadeIn(){
setOpacity( 0 );
document.getElementById("search-result").style.display="block";
fadeIn()
}
function setOpacity( value ) {
document.getElementById("search-result").style.opacity = value / 10;
document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeIn() {
for( var i = 20 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 5) + ')' , 5 * i );
}
function fadeOut() {
//for( var i = 20 ; i <= 100 ; i++ )
//setTimeout( 'setOpacity(' + (5 - i / 5) + ')' , 5 * i );
for( var i = 0 ; i <= 100 ; i++ ) 
setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
4

2 に答える 2

2

で登録された関数document.onclickは、発火が false であるかどうかに関係なく、クリックがあるたびに呼び出されます。close_box_fadeOut()関数内または呼び出されたクリック関数の間に別の場所で、発射されたものが false かどうかを確認する必要があります。

例えば：

function close_box_fadeOut(){
    if(fired){
        return;
    }
    setOpacity( 100 );
    document.getElementById("search-result").style.display="block";
    fadeOut();
    setTimeout(close_box, 800);
}

編集:すべてのコードを変更して機能させる方法は次のとおりです。

<script type="text/javascript">
var fired = false;

document.onclick=function(){close_box_fadeOut()};

function close_box(){
    document.getElementById("search-result").style.display="none";
}
function close_box_fadeOut(){
    if(fired){
        return;
    }
    fired = true;
    setOpacity( 100 );
    document.getElementById("search-result").style.display="block";
    fadeOut();
    setTimeout(close_box, 800);
}
function setOpacity( value ) {
 document.getElementById("search-result").style.opacity = value / 10;
 document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeOut() {
 for( var i = 0 ; i <= 100 ; i++ ) 
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
</script>

編集 2:クリックすると次のようになります。

document.onclick = function(){
    if(fade){
        return;
    }

    document.getElementById("search-input").onmouseenter = function(){
        show_box_fadeIn()
        delete this.onmouseenter;
    };
};
于 2012-08-04T05:18:24.323 に答える
0

関数close_box_fadeOut()には次の行があります

document.getElementById("search-result").style.display="block";

これにより、再びフェードアウトする前に要素が再表示されます。

于 2012-08-04T05:18:19.370 に答える