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

[rafinha_sam 2]

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 !

 

[manoaj 12]

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

[rafinha_sam 2]

 

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.

[codercss 14]

Olá,

 

O que este código é suposto fazer? https://jsfiddle.net/865qzcza/

 

Percebo que ao clicar ele remove a propriedade active que define a cor do background, mas no link acima não consegui ver diferença alguma.

 

Obrigado

[manoaj 12]

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/

[codercss 14]

Obrigado.

Ainda não aprendi JQuery :)