Lucian Kain Lucian Kain - 5 months ago 9
jQuery Question

.fadeIn() only seems to work after the content has been appended

Below is the script for a page I'm coding up. It works fine, but I'm seeing some really weird behavior with


So, there's basically a display window in the center of the screen, and the left and right arrows on either side cycle through
elements containing a multiple choice question form.

That all works fine.

I want it to fade in nicely, and each item fades perfectly, but only after its been appended at least one time.

On the first cycle through, as you click, it's as if
isn't even there, it just happens instantly. If you cycle through again though, it works fine.

The strange thing is, this works perfectly fine with a drop down menu I have on a different part of the site. On that site I use the same logic: a variable holds either a number or a string, the menu item click changes the variable's value, and calls for the function to run through a bunch of
statements until one is found true.

Here is my code for the problem site

$(window).load(function() {

var questionPosition = 0;

function clearBox(){

function cycle(){
if (questionPosition == 0) {

if (questionPosition == 1) {

if (questionPosition == 2) {

if (questionPosition == 3) {

if (questionPosition == 4) {

$('#leftarrow').on('click', function(){

$('#rightarrow').on('click', function(){

Here is a sample of the code using the same logic of the working site, you'll see its pretty much the same idea.

function statusCheck(){
if (status == 0){
} else{}

if (status == 1){
} else{}

I'm fairly new to code, but the only thing that pops out at me is that my original code was
statements, then I figured out I really didn't need the
, so on this newer page I didn't include it.



Never make a bunch of numbered ID elements, ever. It is the worst possible way to do it. It is terrible.

The moment you feel yourself about to piece together the name of an element with the ID, STOP! Step away from the id attribute slowly and pick up a class attribute.

Always use a class name on anything that will occur multiple times, and select that selector and use .length to adapt to the count, and use .eq(N) to select the Nth item.

A bunch of duplicated if statements is the worst way to implement something like this. You should refer to the questions numerically, and use $('.questions').eq(N) to select question N.

The issue is that you fade it before you append it somewhere.

var questions = $('.questions'),
    displayBox = $('#display_box');

function cycle() {
    displayBox.animate({scrollTop:0}, 500);

You had a nice consistent structure to work with, but heavy repetition is not good. It is very error prone to have a lot of different lines that do almost the same thing. That is what variables are for. They hold values for placeholders.

And if you've been told that ID is "faster", you have been mislead. You don't make speed by hard-coding everything to fixed bug-prone names. You make speed by modifying the document in an efficient manner, avoiding forcing the browser to reflow, such as appending a lot of items to something that is visible. The time spent in the $('.questions') selector lookup at startup is an instant.

In fact, my code is far faster. Your code repeatedly does lookups into the page, mine does it once, in an instant, then never needs to look for any again.

If you use questions.length for the wrap around, then the code will also auto-magically handle any number of question elements found in the page.