Jquery Fade-in with images

I'm creating a card game where cards should fade in, I have the following function showCard() which accepts 2 variables, e being the span / id, and t being the name of the card, like 2c (for 2 of clubs).

I'm trying to get the cards to fade in using .delay(40).fadeIn(80) without any success. Can someone throw some pointers out there to help me out?

function showCard(e, t) {
    if (t == "") return;
    var n = document.getElementById(e);
    n.src = "../images/75/" + t + ".png";
    if (n.style.visibility == "visible") {
        n.className = "";
        return
    }
    n.style.visibility = "visible";
    n.className = ""
}

The following code is executed serverside: "actions" is simply an array of data that's caught in the jQuery listener

       $this->actions .= "showCard(\"split_card" . ($c + 1) . "\", '{$this->split_cards[$c]}');";

Solution

You don't need delay. I am not sure what your exact problem is, as the code you pasted is different from what you said you did.

In any case, since you tagged jQuery and mentioned it, I guess you are ok using it. Then you can simply do like so:

function showCard(e,t){
    if (t == "") return;
    var n = $('#' + e);

    n.attr('src',t)
    .fadeIn(1000);
}

I have made a simple example here.

Also, obviously, make sure that your CSS is set up correctly to begin with (i.e. you can't make something fade in if it's already showing).