如何在此JavaScript代碼中添加淡入效果？

我得到了下面的JavaScript代碼：如何在此JavaScript代碼中添加淡入效果？

function myProfileIn() { 
    var showme = document.getElementById("myProfileTop").fadeIn(2000); 
    showme.style.display = "inline"; 
    var showme = document.getElementById("myProfileMain").fadeIn(2000); 
    showme.style.display = "inline"; 
}

此代碼對我的按鈕作爲"onclick="myProfileIn();"使他們獲得是可見的，但我也希望單擊該按鈕時，包括淡入效果。這就是爲什麼我包括".fadeIn(1000)"但這是行不通的。

下面是此功能的激活按鈕：

<div id="profileButtonArea"><div id="profileButtonBox"><img onclick="myProfileIn();" id="profileButtonImg" src="<?php echo $userPath; ?>" /></div></div>

而且這裏有兩個元素（div的），它們在混合：

<div id="myProfileTop" style="display:none;"></div> 
<div id="myProfileMain" style="display:none;"></div>

來源

2016-10-11 Zoung

你的問題是，fadeIn()是jQuery方法。它在標準HTMLElement對象上不可用。另請注意，如果您想要在連續點擊時切換元素的可見性，請使用fadeToggle()。

您還應該使用不顯眼的Javascript來附加事件處理程序，因爲on*事件屬性現在被認爲已過時。正如你用jQuery標記問題一樣。下面是上述所有的工作示例：

$(function() { 
 
    $('#profileButtonBox img').click(function() { 
 
    $("#myProfileTop, #myProfileMain").stop(true).fadeToggle(2000); 
 
    }); 
 
});

#myProfileTop, 
 
#myProfileMain { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="profileButtonArea"> 
 
    <div id="profileButtonBox"> 
 
    <img id="profileButtonImg" src="yourimage.jpg" title="click me" /> 
 
    </div> 
 
</div> 
 

 
<div id="myProfileTop">myProfileTop</div> 
 
<div id="myProfileMain">myPropfileMain</div>

來源

2016-10-11 07:08:07

謝謝！我現在使用這個代碼，這個工作，但是「.fadeIn（）」自動覆蓋「display：none」屬性或者那裏發生了什麼？如果沒有我告訴css風格改變@Rory McCrossan – Zoung

當我點擊相同的按鈕時，我想再次淡出div，所以我認爲這必須用onclick完成：/ @Rory McCrossan – Zoung

是的， fadeIn（）'/'fadeOut（）'自動爲你設置'display'屬性。在切換時使用'fadeToggle（）'。我已經爲你更新了我的例子 –

如何在此JavaScript代碼中添加淡入效果？

回答

相關問題