Element refusing to fade out or in

Question

I have an element that is refusing to fade out or in (other elements work). When I run the jquery fadeOut() in the console it instantly dissapears from the screen??

Here is the html for the element:

<div class="span12">
    <h1 id="pagetitle" class="sitetitle lighttextbackground">
        <a href="asdsf.html">Alexandre</a>
    </h1>
</div>

jquery:

$("#pagetitle").fadeOut(1250);

The whole site with css / js files etc can be seen here.

http://staging.alexandredairy.com/

I've debugged, cut and pasted the code in jsfiddle and I can't find the culprit so any help would be appreciated.

Thank You

My Apologies. I have pushed code so you can see now

I don't see any id or fadeout action on your scripts .... when it fades out? — DaniP, Dec 02 '13 at 20:43

Jimmie Johansson · Accepted Answer · 2013-12-02T22:13:34.107

1

On the site you linked, your h1 doesn't have the pagetitle id.

$('.sitetitle').fadeOut(1250); // should work with current markup

UPDATE
I can see whats wrong now. You have both fadeOut() in the jQuery, and -webkit-trasistion ease-out in the css. If you remove the transition you'll get the jQuery to work. Tbh, I don't really know why they are blocking each other.

edited Dec 02 '13 at 22:13

answered Dec 02 '13 at 20:42

Jimmie Johansson

1,853
1
19
37

DOH!! I haven't uploaded it to server. On my dev box it is there. – GPGVM Dec 02 '13 at 20:46
Thanks @TravisJ , fixed it. – Jimmie Johansson Dec 02 '13 at 20:49
Your update had the answer. So...was that just intellectual knowledge and you knew..or suspected...what to look for or is there some debugging method that tipped you off? – GPGVM Dec 02 '13 at 22:54
1

I have previously had somewhat similar problems myself. So just checked the css if you got any transitions/animations there and thought it might work to just turn them off. – Jimmie Johansson Dec 03 '13 at 08:21

Element refusing to fade out or in

My Apologies. I have pushed code so you can see now

1 Answers1

Linked