Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafinha_sam

Preciso colocar 3 (botões) como FadeIn ou Out

Recommended Posts

Exemplo, a pessoa acessa o site e fia alternando os botões com opacidade ! Consegui achar codigos com um botão embaixo mais eu quero que fique automatico este Fade.

 

Aguardo resposta, agradeço desde já a todos !

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

você quer fade ou opacidade? o Fade In ou Out são efeitos para fazer os elementos aparecerem e desaparecerem respectivamente, de forma gradativa.

E você quer esse efeito nesses botões pq?
Seria uma espécie de menu, onde os usuários quando clicarem em um botão os outros ficam opacos e o botão clicado não?
Caso seja isso use css em conjunto com js.

Ex.:

Observe que o css pode ter o efeito que você quiser, e se preferir as alterações diretamente no js sem usar css.

 

Isto é só um exemplo básico para vc entender a lógica caso seja isso que vc procura, mas vc pode mudar e implementar da forma que achar melhor para seu sistema.

CSS
.active{
   background-color:#000;
}

HTML
<ul id="my-nav">
  <li id="btn-1" onClick="clickBtn(1)">botão 1</li>
  <li id="btn-2" onClick="clickBtn(2)">Botão 2</li>
  <li id="btn-3" onClick="clickBtn(2)">Botão 3</li>
</ul>

JS

function clickBtn(btn){
    $("ul#my-nav li").removeClass('active');
    $("ul#my-nav li#btn-"+btn).addClass('active');
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

você quer fade ou opacidade? o Fade In ou Out são efeitos para fazer os elementos aparecerem e desaparecerem respectivamente, de forma gradativa.

 

E você quer esse efeito nesses botões pq?

Seria uma espécie de menu, onde os usuários quando clicarem em um botão os outros ficam opacos e o botão clicado não?

Caso seja isso use css em conjunto com js.

 

Ex.:

 

Observe que o css pode ter o efeito que você quiser, e se preferir as alterações diretamente no js sem usar css.

 

Isto é só um exemplo básico para você entender a lógica caso seja isso que você procura, mas você pode mudar e implementar da forma que achar melhor para seu sistema.

CSS
.active{
   background-color:#000;
}

HTML
<ul id="my-nav">
  <li id="btn-1" onClick="clickBtn(1)">botão 1</li>
  <li id="btn-2" onClick="clickBtn(2)">Botão 2</li>
  <li id="btn-3" onClick="clickBtn(2)">Botão 3</li>
</ul>

JS

function clickBtn(btn){
    $("ul#my-nav li").removeClass('active');
    $("ul#my-nav li#btn-"+btn).addClass('active');
}

Vou tentar amanhã, e te dou o retorno ! Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como eu disse você pode modificar a seu gosto o código, eu utilizei os recursos da biblioteca jQuery que você não disponibilizou no teste do JSFiddle por isso não funcionou. Você pode optar por não utilizar a biblioteca mas no exemplo em especifico que te passei eu faço o uso da mesma.

 

Olhe no exemplo com jQuery

https://jsfiddle.net/Lo72xy6r/

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.