I am trying to get a jQuery-ui div under the class ui.state.alert to fade into the page as it loads so that users notice it. I have added the fadeTo in a js file but when the page loads, the alert just appears, with no fade effect at all. I have even made sure the 'slow' attribute is added. Here is the html code.
<div class="ui-widget">
<div class='ui-state-error ui-corner-all' id="serviceAlert" style="opacity: .1">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:
.3em;"></span><strong style="color: #1F1F1F">Alert!</strong> Sign Up Services are
currently under construction. Please check back later for further updates.</p>
</div>
</div>
And here is my jQuery file:
$(document).ready(function() {
$('#serviceAlert').fadeTo(1,'slow');
});
I have added the following scripts to my header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/JavaScript" src="jquery-ui-1.10.4.custom\js\jquery-ui-1.10.4.custom.js"></script>
<script type="text/JavaScript" src="js/script.js"></script>
The first Parameter of fadeTo is the duration, here you have to define a number in ms oder slow etc. Your animation is currently only running for 1 ms (thats a bit short (-: ).
.fadeTo( duration, opacity [, complete ] )
You've done it the other way around.
Example:
$('#serviceAlert').fadeTo(1000, 1); //fades in 1sec to opacity 1