if (valid != '') {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('error').html('please correct the errors below!' + valid).slideToggle(550);
} else {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('processing').html('processing....').slideToggle(550);
}
Alleen als ik dus nu eerst de slider met de class error naar benden heb en ik vul alle velden in, dan schuift eerst al de slider met de content van de class processing omhoog. Hoe kan ik zorgen dat eerst altijd de oude content en class omhoog schuift en daarna de juist weer naar beneden?
Je kunt het nl oplossen door de slideUp te doen en de rest van war je uit wil voeren in een callBack te plaatsen. Hierbij word de rest niet eerder uitgevoerd dan dat de slideUp() klaar is.
oke bedankt! Dat pas ik morgen even aan! Alleen ik had nog een probleempje:
ik had dus dit:
$(document).ready(function() {
$('#response_addmusic').hide();
$('form #submit_addmusic').click( function(e) {
e.preventDefault();
var valid = '';
var required = ' is required';
var title = $('form #title').val();
var code = $('form #code').val();
if (title == '' || title.lenght <= 2) {
valid = '<p class="err_submission"> - The Title' + required +'</p>';
}
if (code == '' || code.lenght <= 5) {
valid += '<p class="err_submission"> - The code' + required + '</p>';
}
if (valid != '') {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('error').html('please correct the errors below!' + valid).slideToggle(550);
} else {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('processing').html('processing....').slideToggle(550);
var addmusicData = $('#form_addmusic').serialize();
submitMusic(addmusicData);
}
});
function submitMusic(addmusicData) {
$.ajax({
type: 'POST',
url: 'functions/add_music_data.php',
data: addmusicData,
timeout: 7000,
success: function() {
$('#response_addmusic').delay(150).removeClass().addClass('success').html('Music succesfully added!').fadeIn(3000);
if ($('#response_addmusic').hasClass('success')) {
setTimeout("$('#response_addmusic').fadeOut('350')", 3500);
}
$('#title, #code').val("");
}
});
}
});
maar waarom werkt de hele fadeIn(3000) niet meer als er added succesfully wordt weergeven? het wordt gewoon weergegeven met een vaste snelheid ook al doe je FadeIn weg...
Bij succes voeg je de class success toe. Hierna doe je een fadeIn. Direct daarna doe je een if op aanwezigheid van de class success. Deze is er altijd op dit punt. In de if staat een fadeOut welke dus aan wordt geroepen voordat uberhaupt de fadeIn plaats heeft kunnen vinden.
Je kunt het if statement, als je deze wilt behouden, in de callback van de fadeIn zetten. Dan wordt eerst de gehele fadeIn uitgevoerd en daarna pas je if statement.
Voor de leesbaarheid van je script is het raadzaam om, bij gebruik van meerdere methoden, deze onder elkaar te plaatsen als in mijn voorbeeld. Dit vergroot de leesbaarheid aanzienlijk.
