Effects: How to execute effects on thwo elements each after the other
Hi,
I'm a noob to jQuery and trying to get some UI effects in place. Here is what I try to do:
When a form with an <input type="file"> gets submitted the file upload element should get hidden while a div containing some "please wait..." stuff should be shown. I try to do it the way hiding the upload elements gets entirely hidden before start showing the wait-message-element. I read a little about queuing, callbacks etc. but didn't get it ready "nice" meaning that the second animation is not completely shown.
I am not sure if I missed something in my code or if this maybe is a limitation with the html form submitting behavior.
My HTML looks like this:
-
<form id="picUploadForm" method="post" ...>
-
<input type="file" id="file" name="file" />
-
<input type="submit" id="picSubmitBtn" value="Next" />
-
<div id="uploadIndicator" style="display: none;">Please wait ...</div>
-
</form>
My script like this:
-
<script language="javascript" type="text/javascript">
-
$(document).ready(function() {
- $("#picUploadForm").submit(function() {
-
$("#file").hide('fold', null, 500, function callback(){
-
$("#uploadIndicator").show('clip', null, 500);
-
});
-
});
-
});
-
</script>
Basically I like to hide the #file element before starting showing the #uploadIndicator.
Anybody have an idea how to improve this?
Thanks and cheers,
Marc