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

Question

I got the following javascript code:

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

This code works on my buttons as "onclick="myProfileIn();" so they get to be visible but i also want to include a fadein effect when the button is clicked. That is why i included ".fadeIn(1000)" but this is not working.

Here is the button which activates the function:

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

And here are the two elements(divs) which are blended in:

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

Answer 1

The issue you have is that fadeIn() is a jQuery method. It's not available on a standard HTMLElement object. Also note that if you want to toggle the element's visibility on successive clicks use fadeToggle() .

You should also use unobtrusive Javascript to attach your event handlers as on* event attributes are now considered outdated. As you've tagged the question with jQuery. Here's a working example for all of the above:

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