jquerygoogle-chromesafarifadeinfadeto

jQuery fadeTo and fadeIn not working anywhere except for JSFiddle

I can't seem to get even a simple fade-in effect to work on chrome or safari - but it works perfectly well with jsfiddle (Chrome 19.0.1084.56 & Safari 5.1.7). I'm also not getting any javascript errors to work off of. Previously I had tried

$("#fade").hide().fadeIn

which also worked fine in jsfiddle but not in my file. Interestingly, fadeOut works alright when I use it.

Here's my code below - does it work alright for you? If you have any idea as to why it isn't for me, please let me know! 

<html>

<head>

<title>Wheee jQuery!</title>

<!-- jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$("#fade").fadeTo(2000, 1);

</script>

<!-- css -->
<style type="text/css">
#fade{
    width: 150px;
    height: 30px;
    text-align: center;
    color: blue;
    border: 1px dotted blue;
    opacity: 0.3;
}
</style>

</head>

<body>


<div id="fade">
lalala
</div>   

</body>

</html>
Solution

  • By default, JSFiddle has OnLoad selected which runs the code found within the JavaScript panel within a body.onload event. Your code on the other hand runs the code unwrapped in the header. To simulate that situation in JSFiddle, select No Wrap instead of OnLoad and your code will all of a sudden not work, just like on your server.

    To solve this problem, wrap your code in 

    $(document).ready(function(){
    $("#fade").fadeIn(2000);
});

    Sample of JSFiddle with No Wrap: http://jsfiddle.net/3cXvL/1/

    An alternative solution is to place your code after the div that it needs to affect.

    <div id="fade"></div>
<script>
    $("#fade").fadeIn(2000);
</script>