jQuery淡入淡出效果取代div

我一直在努力尋找解決方案fade效果與此腳本。我仍然在學習基本的jQuery，但似乎無法弄清楚。該腳本工作正常，divs正在取代，但沒有動畫。我嘗試了fadeToggle，fadeIn和fadeOut。jQuery淡入淡出效果取代div

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個不同的divs。

<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>

我該如何解決這個問題？

來源

2012-04-19 Dikki

您還應該使用'onclick'而不是'onmouseclick'。更好的解決方案是將點擊事件（http://api.jquery.com/click/）綁定到初始化代碼中的'div'。 – 2012-04-20 20:18:48

有代碼中的幾個問題，但一停止的動畫時，因爲你已經改變了顯示CSS樣式block調用fadeToggle之前。請嘗試下面的代碼。

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-20 20:11:20

jQuery淡入淡出效果取代div

回答

相關問題