1

I tried to use this solution Using CSS for fade-in effect on page load at this page

I put 

<script type="text/javascript> 
$("#top).addClass("load");
</script>

​in my javascript but why it's not add load class when load. I also has been tried 

<script type="text/javascript> 
$("#top").delay(1000).animate({ opacity: 1 }, 700);​
</script>

but still not worked. It's worked at JSFiddle but not at my site.

Please help me!

Thanks,

Adi

Adi Nugroho
  • 151
  • 1
  • 1
  • 15
  • You're executing your code before the DOM is ready. Wrap your jQuery logic in a document.ready handler, eg: `$(function() { /* your code here ... */ });` – Rory McCrossan May 23 '17 at 20:18
  • Also, you missed a closing quotation mark in `$("#top").addClass("load");`. – Obsidian Age May 23 '17 at 20:20
  • I think you need to include jquery .. you can take a look at https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery and see the **Setting Up jQuery** section .. Additional .. you need to include jquery before doing your stuff or wrap your code in `$(document).ready(function(){ //code here })` – Mohamed-Yousef May 23 '17 at 20:43
  • Thank you for the clue about wrap. I already found the right answer. – Adi Nugroho May 23 '17 at 23:05

2 Answers2

1

Must trigger it like :

$(document).ready(function() {
       $("#top").addClass("load");
       $("#top").delay(1000).animate({ opacity: 1 }, 700);​
});
Tareq boudalia
  • 75
  • 12
  • Thank you for your answer. But it's not worked in my site. The worked wrap is jQuery(document).ready(function($) { }); – Adi Nugroho May 23 '17 at 23:04
  • Okey try this jQuery(document).ready(function() { jQuery("#top").addClass("load"); jQuery("#top").delay(1000).animate({ opacity: 1 }, 700);​ }); – Tareq boudalia May 24 '17 at 15:00
1

Thank you for your answers friends. But this is the worked version

jQuery(document).ready(function($) {
$(".page-id-29 header#top").addClass("load");
});
Adi Nugroho
  • 151
  • 1
  • 1
  • 15