Как добавить эффект fadeIn в этот код javascript?

Question

Я получил следующий код: яваскрипт

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 эффекта при нажатии на кнопке. Вот почему я включил ".fadeIn(1000)", но это не работает.

Вот кнопка, которая активирует функцию:

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

А вот два элемента (дивы), которые смешаны в:

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