0

fadeこのスクリプトを使用した効果の解決策を見つけるのに苦労しています。私はまだ基​​本的なjQueryを学んでいますが、理解できないようです。スクリプトは正常に動作しており、div は置き換えられていますが、アニメーションはありません。私は、fadeToggle、fadeIn、およびfadeOutを試しました。

function HideContent(d) {
    if(d.length < 1) {
        return;
    }
    document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
    if(d.length < 1) {
        return;
    }
    document.getElementById(d).style.display = "block";
    $('#' + d).fadeToggle('slow');
}

onmouseclick でスクリプトを呼び出します。私は約14の異なるdivを持っています。

<a  onmouseclick="ShowContent('div1'); return true; "href="javascript:ShowContent('div1')"> Link button </a>

そして戻る：

<a onmouseclick="HideContent('div1'); return true;" href="javascript:HideContent('div1')"> BACK </a>

この問題を解決するにはどうすればよいですか?

4

1 に答える 1

0

コードにはいくつかの問題がありますがblock、fadeToggle を呼び出す前に表示 CSS スタイルを既に変更しているため、アニメーションが停止する問題が発生します。代わりに以下のコードを試してください。

function HideContent(d) {
    if(d.length < 1) {
        return; 
    }

    // document.getElementById(d).style.display = "none";
    // replace the above line with:
    // $('#' + d).css('display','none');

    // or even better, fade it out:
    $('#' + d).fadeOut('slow');
}

function ShowContent(d) {
    if(d.length < 1) {
        return; 
    }
    // document.getElementById(d).style.display = "block";
    // You don't need the above, the fadeToggle does this for you.

    $('#' + d).fadeIn('slow');
}
于 2012-04-20T20:11:20.963 に答える