Ir para conteúdo
Entre para seguir isso  
AlessandroPiaz

Rotacionar btn após um click

Recommended Posts

Olá pessoal!

Tenho um btn no meu site que serve para rolar o site para baixo. Quero que quando clico no btn pro site descer, o btn gire 180 graus e mude o link (a), para voltar para o topo. Pra mim o código está certo, mas n funciona.

Script:

$('#btn').on('click', function(e){
e.preventDefault();
  $(this).toggleClass('up');
})

Código html do btn:

<a href="#">
<div id="btn">
<center>
<img src="seta.png" width="20px" />
</center> 
</div>
</a>
Css da rotacão:
.up{
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);  
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Alessandro, certo?

Estranho que eu testei seu código e parece que está tudo correto. Verifique se existe algum erro no seu console, se sua biblioteca jQuery está importada, se seu CSS está sendo chamado ou algo do tipo.

Você pode tentar fazer isso usando DOM, sem usar bibliotecas externas, veja o exemplo:

https://jsfiddle.net/1b9hqudf/

É nois!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

  • Conteúdo Similar

    • Por clickanapolis
      Pessoal peguei esse codigo de auto somar valor com quantidade na internet e não estou conseguindo ajustar ele.
       
      Ate que no total eu consegui incluir 2 casas decimais.
       
      Mais no subtotal não, e alem disso gostaria de colocar ele com extensão em moeda real o valor tipo:
       
      1500 para 1.500,00
       
      como eu faria:
       
      <script type="text/javascript"> $(window).load(function(){ function id( el ){ //return document.getElementById( el ); return $( el ); } function calcTotal( un01, qnt01 ) { return un01 * qnt01; } function getElementParent(event){ return event.srcElement.parentNode.parentNode.getAttribute('id'); } function getValorUnitario(elParent){ return $('#'+elParent+' .class_unit input').val(); } function getQuantidade(elParent){ return $('#'+elParent+' .class_quant input').val(); } function setFieldTotal(elParent, valueUnit, valueQuant){ id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant)); setTotalFinal(); } function setTotalFinal(){ var total = 0; $('#table-shop tr .class_total input').each(function(){ if(this.value != ''){ var valor = this.value; total += parseFloat(valor); } }); $('#total .value_total').html(total.toFixed(2)); $('#total .value_total').val(total.toFixed(2)); } $(document).ready(function(){ id('#table-shop tr .class_unit').keyup(function(event) { var elemenPai = getElementParent(event); var valueUnit = getValorUnitario(elemenPai); var valueQuant = getQuantidade(elemenPai); setFieldTotal(elemenPai, valueUnit , valueQuant); }); id('#table-shop tr .class_quant').keyup(function(event) { var elemenPai = getElementParent(event); var valueUnit = getValorUnitario(elemenPai); var valueQuant = getQuantidade(elemenPai); setFieldTotal(elemenPai, valueUnit , valueQuant); }); }); }); </script>  
    • Por Ricardo Beira
      Boa tarde.
       
      Sou bem leigo em php, sei o básico do básico e preciso muito de ajuda.
      Preciso enviar 1000 emails, porém queria dividir os envios de 50 por vez.
      Queria um campo onde ecolocava os 1000 emails ou importando de um txt e ele fizesse o processo de envio de 50-50 automaticamente.
       
    • Por D@nielle
      Olá.
      Estou com dificuldade para trocar a imagem do menu conforme passa o mouse. Criei uma função no javascript para isto, porém não encontro o erro no código.
      Segue o codigo; 
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
      <meta charset"UTF-8"/>
      <title> Tudo sobre Google Glass</title>
      <link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
      </head>
      <script>
      function mudaFoto(foto){
      document.getElementByID("icone").src = foto;
      }
      </script>
      <body>
      <div id="interface">
      <header id="cabecalho">
      <hgroup>
      <h1>Google Glass</h1>
      <h2>A revolução do Google está chegando</h2>
      </hgroup>
      <img id="icone"src="_imagens/glass-oculos-preto-peq.png" alt="google glass">
      <nav id="menu">
      <h1>Menu Principal</h1>
      <ul>
      <li onmouseover="mudaFoto('_imagens/home.png')"><a href="index.html">Home</a></li>
      <li onmouseover="mudaFoto('_imagens/especificacoes.png')"><a href="specs.html">Especificações</a></li>   
       
      A ideia é trocar a imgem de id="icone" por uma imagem do meu arquivo (como está descrito acima) ao passar o mouse. 
      Obrigada
       
       
    • Por Kelly Ferracine
      Adcionei um relógio no site, mas quando atualizo a pagina ele some e logo aparece, isso ta causado problema, pois a div abaixo sobe fazendo ficando esquisito, alguém poderia me ajudar?? Agradeço a atenção
    • Por ghlevin
      Estou precisando fazer um refresh automático em algumas páginas do site de um cliente. Porém, esse refresh precisa acontecer apenas UMA vez.
      Eu sei que daria pra eu colocar a meta tag abaixo, por exemplo:
      <meta content="3;url=http://www.meusite.com.br/index.php" http-equiv="Refresh" /> Mas aí ela atualizaria sempre a cada 3 segundos. E eu queria que atualizasse só uma vez. Como dá pra fazer isso? Com uso de SESSION, COOKIE ou alguma outra coisa?
×

Informação importante

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