![](/img/trans.png)
[英]How do I add FadeIn/FadeOut javascript effect during images change after a few seconds
[英]How do I add a fadeIn effect in this javascript code?
我得到以下 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>
您遇到的問題是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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.