Jquery transition eating the margin of an element

Question

I'm trying to make an multi-step form, using the Jquery code provided in this tutorial.

It is working except it eats the left margin of the next element after the transition is complete. To better illustrate my problem here is a Fiddle.

    //jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();


    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();


    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
    });
});

$(".submit").click(function(){
    return false;
})

What I need is that all the fieldsets stay centralized after the user clicks "Next".

Couldn't understand why the code is doing that, thanks in advance.

Michael Coker · Accepted Answer

Your initial fieldset has no left value, so it just displays relative to where it is in the parent. The next/transitioned fieldsets have a left value set to 0. So you can either set your initial fieldset to have left: 0; or remove the left positioning from the next/transitioned fieldsets. I just commented out the line that defines the left value and removed the code that is updating the fieldset's css with that value.

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	//$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			//left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'transform': 'scale('+scale+')'});
			next_fs.css({'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		//easing: 'easeInOutBack'
	});
});

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	//$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left': left});
			previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		//easing: 'easeInOutBack'
	});
});

$(".submit").click(function(){
	return false;
})

#form_cotacao input[type="text"], input[type="date"], input[type="number"], select, messagebox {
    font-size:16px !important;
    background: #F0F0F0;
}

#form_cotacao input[type="button"] {
    border:3px solid transparent;
    font-size: 22px;
    font-family: museo100;
    font-weight: bold;
    color: white;
    width: 50%;
    height: 60px;
    background: #338076;
    display: inline-block;
    float: none !important;
}

#form_cotacao input[type="button"]:hover {
    border: 3px solid #338076;
    color: #338076;
    background: white;
}

#form_cotacao label {
    width: 25%;
}

#form_cotacao input[type="radio"] {
    height: 18px;
}

#form_cotacao label {
    font-size:22px !important;
    font-weight: normal;
}

#form_cotacao .row {
    text-align: center !important;
}

 #formulario-cotacao fieldset:not(:first-of-type) {
    display: none;
 } 

 #formulario-cotacao fieldset {
    position: absolute !important;
} 

#form_cotacao h3{
    font-size: 18px;
    font-weight: 700;
}

#form_cotacao {
    margin-top: 120px;
}

 @media (min-width: 1200px) {
#wrapper .container {
    width: 800px !important;
}
}



    
           
        
             INFORMAÇÕES DO SEGURADO 
            
            Nome
            
            CPF
            
            Data de Nascimento
            
            Estado Civil
            
            Endereço
            
            Telefone
            
            Tipo de Seguro
            
            Seguradora Anterior
            
            Número da apólice anterior
            
            Classe Bônus
            
            
        
        
        
             INFORMAÇÕES DO CONDUTOR 
            
            Nome
            
            CPF
            
            Data de Nascimento
            
            Estado Civil
                
            Endereço
            
            Telefone
            
            Tipo de Residência
            
            
            
        
        
        
             INFORMAÇÕES DO VEÍCULO 
            
            Marca/Modelo
            
            Ano
            
            Tipo de Câmbio
            
                Manual
            
                Automático

            Quantidade de Portas
            
                2 Portas
            
                4 Portas
            Placa
            
            Número do Chassi
            
            Tipo de Combustível
            
            Alienado
            
                Sim
            
                Não
                
                
        
        
        
             INFORMAÇÕES DO PERFIL SEGURADO 
            
            CEP de pernoite
            
            Existem outros condutores menores de 26 anos que possam utilizar o veículo segurado no máximo 2 dias por semana?
            
            Se a resposta acima foi afirmativa, qual a idade deste(s) condutor(es)?
            
            Qual a distância da residência até o local de trabalho?
            
            Possui garagem na residência?
            
            Possui garagem no trabalho?
            
            Possui garagem na faculdade/colégio/pós-graduação?
            
            Possui algum dispositivo antifurto? Se afirmativo, informe qual
            
            Quantos quilômetros o veículo percorre por mês?
            
            
            
        
        
        
         INFORMAÇÕES COMPLEMENTARES 
        
        Tipo de Franquia
        
        Tipo de Vidro
        
            Básico
        
            Completo
            
        Há necessidade de carro reserva? Caso sim, informe por quantos dias

Jquery transition eating the margin of an element

Answers (1)

Related Questions