I have two elements that shouldn't be active at the same time, so when one is toggled I fade the other out, however I would like to be able to fade the open element out and then bring the other one in. Is there a way to do this that isn't a hack?
<script ="text/javascript">
$(function() {
$('#jlogin').click(function() {
$('#login').toggle('fast');
$('#reg').fadeOut('fast');
});
$('#jreg').click(function() {
$('#reg').toggle('fast');
$('#login').fadeOut('fast');
});
});
</script>
That is my current script.
Look at using the callback mechanism for fadeOut so you can chain the animations. The callback on the animation methods are called after the previous animation is complete.
<script type="text/javascript">
$(function() {
$('#jlogin').click(function() {
$('#reg').fadeOut('fast', function() {
$('#login').toggle('fast');
});
});
$('#jreg').click(function() {
$('#login').fadeOut( 'fast', function() {
$('#reg').toggle('fast');
});
});
});
</script>