如何在此 javascript 代码中添加淡入效果？

Question

我得到以下 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>

这里是混合的两个元素（divs）：

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

Answer 1

您遇到的问题是 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>

如何在此 javascript 代码中添加淡入效果？

How do I add a fadeIn effect in this javascript code?

javascript

jquery

fadein