Jquery过渡吃元素的边缘

Question

我正在尝试使用this教程中提供的Jquery代码创建一个多步骤表单。

除了在转换完成后吃掉下一个元素的左边距之外它正在工作。为了更好地说明我的问题，我需要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;
})

我需要的是所有字段集在用户点击“下一步”后保持集中。

无法理解为什么代码会这样做，提前感谢。

Answer 1

您的初始字段集没有left值，因此它只显示相对于父级的位置。下一个/已转换的字段集的left值设置为0。因此，您可以将初始字段集设置为left: 0;，或从下一个/转换的字段集中删除left定位。我刚刚注释掉了定义left值的行，并删除了使用该值更新字段集的css的代码。

＆＃13;

＆＃13;

//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;
})

＆＃13;

#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;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="wrapper">
    
    <form action="insere.php" method="post" id="formulario-cotacao">       
        <fieldset class="container bg-cotacao" id="form_cotacao">
            <h2 class="text-center"> INFORMAÇÕES DO SEGURADO </h2>
            <div class="div_servicos"></div>
            <h3>Nome</h3>
            <input class="input_c pd_fix" type="text" name="nome" id="nome" pattern="[a-zA-Z]+[a-zA-Z ]+">
            <h3>CPF</h3>
            <input class="input_d pd_fix" type="text" name="cpf" id="cpf" pattern="\d*" maxlength="11" placeholder="Insira o número de seu CPF sem pontos e traços.">
            <h3>Data de Nascimento</h3>
            <input class="input_d pd_fix" type="date" name="c_dataNasc" id="c_dataNasc">
            <h3>Estado Civil</h3>
            <select class="input_d pd_fix" name="e_civil" id="e_civil">
                <option>Solteiro(a)</option>
                <option>Casado(a)</option>
                <option>Viúvo(a)</option>
                <option>Separado(a)</option>
                <option>Mora há pelo menos 2 anos com o companheiro(a)</option>
            </select>
            <h3>Endereço</h3>
            <input class="input_c pd_fix" type="text" name="endereco" id="endereco" placeholder="Insira seu endereço contendo logradouro, número, bairro, cidade e estado.">
            <h3>Telefone</h3>
            <input class="input_d pd_fix" type="text" name="telefone" id="telefone" placeholder="Telefone com DDD">
            <h3>Tipo de Seguro</h3>
            <select class="input_d pd_fix" name="t_seguro" id="t_seguro">
                <option>Seguro novo</option>
                <option>Renovação sem sinistro</option>
                <option>Renovação com sinistro</option>
            </select>
            <h3>Seguradora Anterior</h3>
            <input class="input_d pd_fix" type="text" name="s_anterior" id="s_anterior">
            <h3>Número da apólice anterior</h3>
            <input class="input_d pd_fix" type="text" name="a_anterior" id="a_anterior">
            <h3>Classe Bônus</h3>
            <input class="input_d pd_fix mb_40" type="text" name="cl_bonus" id="cl_bonus">
            <input type="button" value="Próximo" class="trans mb_40 next">
        </fieldset>
        
        <fieldset class="container bg-cotacao" id="form_cotacao">
            <h1 class="p30"> INFORMAÇÕES DO CONDUTOR </h1>
            <div class="div_servicos"></div>
            <h3>Nome</h3>
            <input class="input_c pd_fix" type="text" name="c_nome" id="c_nome" pattern="[a-zA-Z]+[a-zA-Z ]+">
            <h3>CPF</h3>
            <input class="input_d pd_fix" type="text" name="c_cpf" id="c_cpf" pattern="\d*" maxlength="11" placeholder="Insira o número de seu CPF sem pontos e traços.">
            <h3>Data de Nascimento</h3>
            <input class="input_d pd_fix" type="date" name="c_dataNasc" id="c_dataNasc">
            <h3>Estado Civil</h3>
            <select class="input_d pd_fix" name="c_estadoCivil" id="c_estadoCivil">
                <option>Solteiro(a)</option>
                <option>Casado(a)</option>
                <option>Viúvo(a)</option>
                <option>Separado(a)</option>
                <option>Mora há pelo menos 2 anos com o companheiro(a)</option>
            </select>    
            <h3>Endereço</h3>
            <input class="input_c pd_fix" type="text" name="c_endereco" id="c_endereco" placeholder="Insira seu endereço contendo logradouro, número, bairro, cidade e estado.">
            <h3>Telefone</h3>
            <input class="input_d pd_fix" type="text" name="c_telefone" id="c_telefone" placeholder="Telefone com DDD">
            <h3>Tipo de Residência</h3>
            <select class="input_d pd_fix mb_40" name="tipoResidência" id="tipoResidência">
                <option>Casa/Sobrado</option>
                <option>Casa em condomínio fechado</option>
                <option>Apartamento/Flat</option>
                <option>Chácara/Fazenda/Sítio</option>
                <option>Outros</option>
            </select>
            <input type="button" value="Anterior" class="trans previous">
            <input type="button" value="Próximo" class="trans mb_40 next">
        </fieldset>
        
        <fieldset class="container bg-cotacao" id="form_cotacao">
            <h1 class="p30"> INFORMAÇÕES DO VEÍCULO </h1>
            <div class="div_servicos"></div>
            <h3>Marca/Modelo</h3>
            <input class="input_d pd_fix" type="text" name="marcaModelo" id="marcaModelo">
            <h3>Ano</h3>
            <input class="input_d pd_fix" type="number" name="ano" id="ano" min="1997" max="2017" step="1">
            <h3>Tipo de Câmbio</h3>
            <div class="radio">
                <label for="cambio_man"><input class="input_c pd_fix" type="radio" name="cambio" value="manual" id="cambio_man" checked>Manual</label></div>
            <div class="radio">
                <label for="cambio_auto"><input class="input_c pd_fix" type="radio" name="cambio" value="auto" id="cambio_auto" >Automático</label></div>

            <h3>Quantidade de Portas</h3>
            <div class="radio">
                <label for="portas_2"><input class="input_c pd_fix" type="radio" name="portas" value="2" id="portas_2" checked>2 Portas</label></div>
            <div class="radio">
                <label for="portas_4"><input class="input_c pd_fix" type="radio" name="portas" value="4" id="portas_4">4 Portas</label></div>
            <h3>Placa</h3>
            <input class="input_d pd_fix" type="text" name="placa" id="placa" placeholder="Apenas letras e números, sem traço.">
            <h3>Número do Chassi</h3>
            <input class="input_d pd_fix" type="text" name="chassi" id="chassi" placeholder="Apenas letras e números, sem pontos.">
            <h3>Tipo de Combustível</h3>
            <select class="input_d pd_fix" name="combustivel" id="combustivel">
                <option>Gasolina</option>
                <option>Álcool</option>
                <option>Álcool/Gasolina</option>
                <option>Diesel</option>
                <option>Álcool/Gasolina/Gás</option>
            </select>
            <h3>Alienado</h3>
            <div class="radio">
                <label for="alienado_sim"><input class="input_c pd_fix" type="radio" name="alienado" value="sim" id="alienado_sim" checked>Sim</label></div>
            <div class="radio">
                <label for="alienado_nao"><input class="input_c pd_fix" type="radio" name="alienado" value="nao" id="alienado_nao">Não</label></div>
                <input type="button" value="Anterior" class="trans previous">
                <input type="button" value="Próximo" class="trans mb_40 next">
        </fieldset>
        
        <fieldset class="container bg-cotacao" id="form_cotacao">
            <h1 class="p30"> INFORMAÇÕES DO PERFIL SEGURADO </h1>
            <div class="div_servicos"></div>
            <h3>CEP de pernoite</h3>
            <input class="input_d pd_fix" type="text" name="pernoite" id="pernoite" pattern="\d*" maxlength="8" placeholder="Insira o CEP, sem traços ou pontos.">
            <h3>Existem outros condutores menores de 26 anos que possam utilizar o veículo segurado no máximo 2 dias por semana?</h3>
            <select class="input_d pd_fix" name="pgtaMenores" id="pgtaMenores">
                <option>Não</option>
                <option>Sim, feminino</option>
                <option>Sim, masculino</option>
                <option>Sim, ambos os sexos</option>
            </select>
            <h3>Se a resposta acima foi afirmativa, qual a idade deste(s) condutor(es)?</h3>
            <input class="input_d pd_fix" type="number" name="pgtaIdade" id="pgtaIdade" min="18" max="121" step="1" placeholder="Informe a idade, apenas números.">
            <h3>Qual a distância da residência até o local de trabalho?</h3>
            <select class="input_d pd_fix" name="pgtaDistancia" id="pgtaDistancia">
                <option>Até 10km</option>
                <option>Até 20km</option>
                <option>Até 30km</option>
                <option>Até 40km</option>
                <option>Acima de 40km</option>
                <option>Não trabalha ou não utiliza o veículo como meio de transporte ao trabalho</option>
            </select>
            <h3>Possui garagem na residência?</h3>
            <select class="input_d pd_fix" name="pgtaGaragemRes" id="pgtaGaragemRes">
                <option>Não</option>
                <option>Sim, com portão manual</option>
                <option>Sim, com portão automático ou porteiro</option>
            </select>
            <h3>Possui garagem no trabalho?</h3>
            <select class="input_d pd_fix" name="pgtaGaragemTrab" id="pgtaGaragemTrab">
                <option>Sim</option>
                <option>Não</option>
                <option>Não trabalha ou não utiliza o veículo como meio de transporte ao trabalho</option>
            </select>
            <h3>Possui garagem na faculdade/colégio/pós-graduação?</h3>
            <select class="input_d pd_fix" name="pgtaGaragemFac" id="pgtaGaragemFac">
                <option>Sim</option>
                <option>Não</option>
                <option>Não estuda ou não utiliza o veículo como meio de transporte ao local de estudo</option>
            </select>
            <h3>Possui algum dispositivo antifurto? Se afirmativo, informe qual</h3>
            <input class="input_d pd_fix" type="text" name="pgtaAntifurto" id="pgtaAntifurto" placeholder="Deixe em branco caso não possua.">
            <h3>Quantos quilômetros o veículo percorre por mês?</h3>
            <select class="input_d pd_fix mb_40" name="pgtaKm" id="pgtaKm">
                <option>Até 500km</option>
                <option>De 501km a 900km</option>
                <option>De 901km a 1500km</option>
                <option>Acima de 1500km</option>
            </select>
            <input type="button" value="Anterior" class="trans previous">
            <input type="button" value="Próximo" class="trans mb_40 next">
        </fieldset>
        
        <fieldset class="container bg-cotacao" id="form_cotacao">
        <h1 class="p30"> INFORMAÇÕES COMPLEMENTARES </h1>
        <div class="div_servicos"></div>
        <h3>Tipo de Franquia</h3>
        <select class="input_d pd_fix" name="franquia" id="franquia">
            <option>Obrigatória</option>
            <option>Reduzida</option>
            <option>Majorada</option>
        </select>
        <h3>Tipo de Vidro</h3>
        <div class="radio">
            <label for="vidro_bas"><input class="input_c pd_fix" type="radio" name="vidro" value="basico" id="vidro_bas" checked>Básico</label></div>
        <div class="radio">
            <label for="vidro_com"><input class="input_c pd_fix" type="radio" name="vidro" value="completo" id="vidro_com">Completo</label></div>
            
        <h3 class="mt_40">Há necessidade de carro reserva? Caso sim, informe por quantos dias</h3>
        <select class="input_d pd_fix mb_40" name="carroReserva" id="carroReserva">
            <option>Não</option>
            <option>7 dias</option>
            <option>15 dias</option>
            <option>30 dias</option>
        </select>
        <div class="row text-center">
        <input type="button" value="Anterior" class="trans mb_100 previous">
        <input type="button" value="Enviar Solicitação" class="trans mb_40"></div>
        </fieldset>  
    </form>
</div>

＆＃13;

＆＃13;

＆＃13;