There is such code:

<!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $(document.body).click(function() { $("div:hidden:first").fadeIn("slow"); }); }); </script> <style> span { color: red; cursor: pointer; } div { margin: 3px; width: 80px; display: none; height: 80px; float: left; } div#one { background: #f00; } div#two { background: #0f0; } div#three { background: #00f; } </style> </head> <body> <span>Click here...</span> <div id="one"></div> <div id="two"></div> <div id="three"></div> </body> </html>

How to do the same, but only in pure JavaScript?

    2 answers 2

    Docks:

    So, we have everything we need, we can start.

     $(document).ready()

    Replaced by

     document.addEventListener( "DOMContentLoaded", function(){ //.... }, false );

    We are looking for the first hidden div.

     $("div:hidden:first").fadeIn("slow");

    Replaced by

     /** * */ var work_div , div_list = document.getElementsByTagName('div'); /** * ΠΈΡ‰Π΅ΠΌ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ скрытый Π΄ΠΈΠ² */ for(var i=0; i < div_list.length; i++) { if(div_list[i].style.display.toLowerCase() == 'none') { work_div = div_list[i]; break; } } /** * Ссли нашли, Ρ‚ΠΎ запускаСм Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ */ if(work_div != undefined) { work_div.style.display = 'block'; work_div.style.opacity = '0'; animate({ duration: 1000, // врСмя Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ 1000 мс step: function(progress) { work_div.style.opacity = progress; } }); } /** * Ρ„-ция Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ function animate(opts) { var start = new Date; var timer = setInterval(function() { // Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ сколько Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΏΡ€ΠΎΡˆΠ»ΠΎ var progress = (new Date - start) / opts.duration; if (progress > 1) progress = 1; // ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ opts.step(progress); if (progress == 1) clearInterval(timer); // ΠΊΠΎΠ½Π΅Ρ† :) }, opts.delay || 10); // ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΊΠ°Π΄Ρ€ ΠΊΠ°ΠΆΠ΄Ρ‹Π΅ 10мс }
    • Why is it so difficult for an onload to catch? > window.onload = function () {/ * code * /}; - dlarchikov
    • 2
      @ dimka3210 is to run after the house is redia, and this is not equivalent, everything is correct here. - vkovalchuk88

    It has long been ... As an option, you can in this way . Do not kick too much. Slightly out of touch with the native))

     var but = document.getElementsByTagName('span')[0], divs = document.getElementsByTagName('div'), timer = null; but.onclick = function(){ for(var i = 0; i < divs.length; i++){ if(window.getComputedStyle(divs[i], null).getPropertyValue('display') == 'none'){ animateEl(divs[i]); return false; } } }; function animateEl(el){ el.style.display = 'block'; el.style.opacity = 0; clearInterval(timer); var opacIncr = 0; timer = setInterval(function(){ el.style.opacity = opacIncr; opacIncr += 0.1; if(opacIncr >= 1) { clearInterval(timer); } },50); return false; }