Comutar mostrar/esconder ao carregar em jQuery
Eu tenho um elemento div, por isso quando eu clicar nele, outro div que está escondido por omissão é deslizar e mostrar, aqui está o código para a animação em si:
$('#myelement').click(function(){
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Como posso fazer isso para que quando eu clicar no #myelement mais uma vez (quando o elemento já é mostrado) ele irá esconder o #another-element Assim:
$('#another-element').hide("slide", { direction: "right" }, 1000);?
tão basicamente, que deve funcionar exactamente como uma slideToggle mas com as funções show/hide. Isso é possível?
6 answers
O evento de comutação está desactualizado na versão 1.8, e removido na versão 1.9
experimenta isto...
$('#myelement').toggle(
function () {
$('#another-element').show("slide", {
direction: "right"
}, 1000);
},
function () {
$('#another-element').hide("slide", {
direction: "right"
}, 1000);
});
Nota: a assinatura deste método foi depreciada em Jquery 1.8 e removida em jQuery 1.9. jQuery também fornece um método de animação chamado .comuta () que activa ou desactiva a visibilidade dos elementos. Se a a animação ou o método do evento é disparado depende do conjunto de argumentos aprovado, docs jQuery .
A .o método toggle () é fornecido por conveniência. É relativamente simples de implementar o mesmo comportamento à mão, e isso pode ser necessário se as suposições incorporadas .comutar () provar o limite. Por exemplo .comutar () não está garantido que funcione correctamente se for aplicado duas vezes ao mesmo elemento. Desde .comutar () internamente usa um clique manipulador para fazer o seu trabalho, temos de separar o clique para remover um comportamento anexado com .comutar() , para que outros manipuladores de clique possam ser capturados no cruzado. A implementação também exige .preventefault() evento, por isso as ligações não serão seguidas e os botões não serão carregados se .toggle () foi chamado no elemento, docs jQuery
Você comuta entre a visibilidade usando a opção Mostrar e esconde-se com o botão. Você pode colocar a condição na visibilidade se o elemento é visível, em seguida, esconder outro mostrá-lo. Note que irá precisar de jQuery UI para usar efeitos de adição com a direcção do mostrar / esconder do tipo .
$( "#myelement" ).click(function() {
if($('#another-element:visible').length)
$('#another-element').hide("slide", { direction: "right" }, 1000);
else
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Ou, simplesmente, use comutar em vez de carregar. Ao usar a opção comuta, não irá necessitar de uma declaração de condição (se-else). como sugerido por T. J. Crowder.
$( "#myelement" ).click(function() {
$('#another-element').toggle("slide", { direction: "right" }, 1000);
});
Faça uso da função de comutação jquery que faz a tarefa por si
.comutar () - mostrar ou esconder os elementos correspondentes.
$('#myelement').click(function(){
$('#another-element').toggle('slow');
});
Pode usar este código para comutar o seu elemento var ele = jQuery ("yourelementid"); tutor.slideToggle ('lento'); isto vai funcionar para você:)
Isto vai funcionar para u
$("#button-name").click(function(){
$('#toggle-id').slideToggle('slow');
});
Pode usar a função .toggle() em vez de .click()....
$(document).ready( function(){
$("button").click(function(){
$("p").toggle(1000,'linear');
});
});