ansaurus

Question

how to fade in a div?

Answer 1

+1 A:

That is correct as long as you make sure the elements exists when the code runs.

$(function() {
    $('div.sc_menu').hide().delay(2000).fadeIn('slow');
});

EDIT: Made it so that the fadeIn() will wait 2 seconds before running. You need to be using jQuery 1.4 or later to do this.

This will make sure the document is loaded before the .fadeIn() fires.

EDIT:

This appears to be the code from the link you provided.

$(function () {
     .load(function () {
     // set the image hidden by default
      $('#div.sc_menu').hide();.fadeIn(3000);
}}

It is malformed on several levels. Be sure to post your actual code in your question. Always helps to get the best solution.

patrick dw 2010-09-09 01:57:35

Should I hide the div? display:none;

Earl Larson 2010-09-09 01:59:27

@Earl The problem you had was that you were using `.load()` , which is not the correct syntax for the DOM ready event handler.

Yi Jiang 2010-09-09 02:00:42

@Earl - You could certainly hide it in your CSS. But if javascript is turned off in a browser, it will never be shown.

patrick dw 2010-09-09 02:01:33

Well what I meant was do I have to hide it for the script to work? Ive been searching forever before asking this and they said I should...

Earl Larson 2010-09-09 02:02:42

Now its just hiding the div, it wont even appear...

Earl Larson 2010-09-09 02:03:32

@Earl - Yes, if it isn't hidden, it won't be able to fade in because it will already be visible. I suppose you could just set its opacity to 0 instead of `display none;`. Either way would work.

patrick dw 2010-09-09 02:04:42

Ok, its not appearing at all. The CSS of the div: div.sc_menu {position: relative;width: 106%;overflow: hidden;margin-left:-52px;margin-top:25%;background:url('http://static.tumblr.com/ux4v5bf/Rv2l8eu6i/slice.png') repeat-x;display:none;} the javascript <script type="text/javascript">$(function() { $('div.sc_menu').hide().fadeIn('slow');});</script>

Earl Larson 2010-09-09 02:06:40

@Earl - Do you mean the sliding menu in the middle of the page? It appears for me. When I mouseover the items, I get a popup for each one.

patrick dw 2010-09-09 02:09:36

yes but the div is supposed to fade in on page load.

Earl Larson 2010-09-09 02:11:27

@Earl - You mean the horizontal light gray bar across the middle of the page? It does, for me anyway.

patrick dw 2010-09-09 02:15:41

...you may want to delay the code for a couple of seconds to make the effect more obvious. I'll update my answer.

patrick dw 2010-09-09 02:17:59

Answer 2

A:

Maybe its my computer.... its never done this. Regardless do you like the design of the theme?

earl 2010-09-09 02:24:45

Answer 3

+3 A:

CSS:

div.sc_menu { display: none; }

JQUERY:

$(document).ready(function(){$('div.sc_menu').fadeIn('slow');});

mingos 2010-09-09 02:26:13

Answer 4

A:

Also, I am using jquery 1.4.2

$(function() { $('div.sc_menu').hide().fadeIn('slow'); });

Earl Larson 2010-09-09 02:28:22

Answer 5

A:

Hmmm. The code seems OK to me. Try removing the "display:none;" from the CSS, to make sure that your DIV is positioned where you want it to, not overlapped by another DIV, or not off to the wrong side, or perhaps at 0 width or 0 height.

Firebug plugin for Firefox is also another great tool to observe changes to the DOM on the fly.

jeffkee 2010-09-09 03:17:05

ansaurus

tags:

views:

answers:

how to fade in a div?

related questions