1

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

GPGVM
  • 5,515
  • 10
  • 56
  • 97

1 Answers1

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.

Jimmie Johansson
  • 1,875
  • 1
  • 19
  • 39
  • DOH!! I haven't uploaded it to server. On my dev box it is there. – GPGVM Dec 02 '13 at 20:46
  • 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