2

私は次のJavaScriptを持っています

function fadeIn(objectID, amount) {
object = document.getElementById(objectID + 'Des');
if(amount > 0)
{
    object.style.display ='block';
    object.style.opacity = '0';
}
var i = 0;
animatefadein = function()
{
    var MIN_OPACITY = 0;
    var MAX_OPACITY = 1;
    if ( (amount > 0 && object.style.opacity < MAX_OPACITY) || (amount < 0 && object.style.opacity > MIN_OPACITY)) 
    {
        var current = Number(object.style.opacity);
        var newopac = current + Number(amount);
        object.style.opacity = String(newopac);
        setTimeout('animatefadein()', 50);

    }

}
animatefadein();
if(amount < 0)
{
    object.style.display ='none';
}

}

ユーザーがそれらを参照する場合は、その上に別の要素を配置する必要があるため、displayをnoneに設定する必要があります。

これがHTMLです。

<div id='products'>
            <img src = './product1.png' usemap='#ourProducts' alt='Our Products' title='Hover over the names to find out more.'>
            <map id='ourProducts' name='ourProducts'>
                <area shape='rect' coords="55,55,210,110" href='#' id='forcePort' alt='ForcePort' title='ForcePort' onmouseover='fadeIn("forcePort",0.1)' onmouseout='fadeIn("forcePort",-0.1)'/>
                <area shape='rect' coords="105,248,270,290" href='#' id='quickPort' alt='QuickPort' title='QuickPort' onmouseover='fadeIn("quickPort",0.1)' onmouseout='fadeIn("quickPort",-0.1)'/>
                <area shape='rect' coords="390,260,535,303" href='#' id='scrinter' alt='Scrinter' title='Scrinter' onmouseover='fadeIn("scrinter",0.1)' onmouseout='fadeIn("scrinter",-0.1)'/>
                <area shape='rect' coords="675,242,835,292" href='#'  id='bugTrail' alt='Bug Trail' title='Bug Trail' onmouseover='fadeIn("bugTrail",0.1)' onmouseout='fadeIn("bugTrail",-0.1)'/>
                <area shape='rect' coords="688,42,858,138" href='#' id='dataExtract' alt='CRM Data Extractor' title='CRM Data Extractor' onmouseover='fadeIn("dataExtract",0.1)' onmouseout='fadeIn("dataExtract",-0.1)'/>
            </map>
            <div id='productDes'>
                <div id='scrinterDes'>
                                      Data that needs to be shown!
                </div>
                <div id='bugTrailDes'>
                </div>
                <div id='quickPortDes'>
                </div>
                <div id='forcePortDes'>
                </div>
                <div id='dataExtractDes'>
                </div>
            </div>
        </div>

ご覧のとおり、フェードアウトは機能していません。また、setTimeoutループ内にカウンターを配置してコンソールに出力すると、フェードアウトイベントでカウントできない回数ループすることがわかります。これが問題のサイトです、

Webサイト

ディスプレイに表示されている製品に移動し、製品名にカーソルを合わせます。

4

2 に答える 2

2

これは jQuery http://jquery.com/で非常に簡単に実現できることを理解していただければ幸いです。スクリプトの問題は、Opacityとが 2 つの異なる CSS プロパティであることです。これを機能させるには、0Displayに設定する必要があります。またはにOpacity変更Display: noneしてから、アニメーション化しますblockinline-blockOpacity

于 2012-08-15T20:05:31.157 に答える
1

ここで参照してください: http://jsfiddle.net/V8SAx/

まず、次のように呼び出すべきではありませんsetTimeout:非常に遅く安全でない をsetTimeout('animatefadein()', 50)使用するためです。eval

第二に、ここにコードがあります：

function fadeIn(objectID, amount,callback) {
    object = document.getElementById(objectID + 'Des');
    object.style.display ='block';
    object.style.opacity = String(Number(amount<0));
    animatefadein = function()
    {
        var MIN_OPACITY = 0;
        var MAX_OPACITY = 1;
        if ( (amount > 0 && object.style.opacity < MAX_OPACITY) ||
             (amount < 0 && object.style.opacity > MIN_OPACITY)
        ){
            var current = Number(object.style.opacity);
            var newopac = current + Number(amount);
            console.log(current + Number(amount));
            object.style.opacity = String(newopac);
            setTimeout(animatefadein, 50);

        }else{
            if(amount<0){object.style.display='none';}
            if(callback){callback();}
        }

    }
    animatefadein();
}
fadeIn('a',0.1,function(){fadeIn('a',-0.1);});

フェード プロセスの後に呼び出されるコールバックのサポートを追加しました。興味があるかもしれません。

于 2012-08-15T20:22:21.913 に答える