jQuery fadeTo and fadeIn not working anywhere except for JSFiddle

StackOverflow https://stackoverflow.com/questions/11023730

Вопрос

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>
Это было полезно?

Решение

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>

Другие советы

"Use $(document).ready(function(){/*mycode*/}); (incoming 8 answers)" - Kevin.

Works for me. http://jsfiddle.net/3cXvL/

$(document).ready(function() {
    $("#fade").fadeTo(2000, 1);
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top