7
respostas

O placar é mostrado mas não acontece a animação de scroll

$("#botao-placar").click(mostraPlacar)

function inserePlacar(){
      var corpoTabela = $(".placar").find("tbody");
      var usuario = "kadu";
      var numPalavras = $("#contador-palavras").text();

      var linha = novaLinha(usuario,numPalavras);
      linha.find(".botao-remover").click(removeLinha);

      corpoTabela.prepend(linha);
      $(".placar").slideDown(500);
      scrollPlacar();
}


function scrollPlacar() {
  var posicaoPlacar = $(".placar").offset().top;
  console.log(posicaoPlacar);
  $(".body").animate(
    {
    scrollTop: posicaoPlacar+"px"
  },1000);
}

function novaLinha(usuario,palavras) {
  var linha = $("<tr>");
  var colunaUsuario = $("<td>").text(usuario);
  var colunaPalavras = $("<td>").text(palavras);
  var colunaRemover = $("<td>");

  var link = $("<a>").addClass("botao-remover").attr("href","#");
  var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

  link.append(icone);

  colunaRemover.append(link);

  linha.append(colunaUsuario);
  linha.append(colunaPalavras);
  linha.append(colunaRemover);
  return linha;
}

function removeLinha() {
    event.preventDefault();
    var linha = $(this).parent().parent();
    linha.fadeOut();
    setTimeout(function(){
      linha.remove();
    },1000);
}


function mostraPlacar() {
  $(".placar").stop().slideToggle(600);
}
7 respostas

Olá! Tive o mesmo problema. Precisei limpar o cache do navegador. Além disso, o tamanho e a resolução da minha tela não contribuíam. Rodando numa tela menor (15 polegadas) funcionou normalmente.

tentei fazer a mesma coisa mas ainda não consigo fazer a animação de scroll funcionar

Oi Henrique! Vendo o seu código, você chamou o body como classe na linha

$(".body").animate

E ele é apenas um elemento HTML. E dependendo do teu navegador, pode ter bugs segundo o que o Douglas explica nesse link: https://cursos.alura.com.br/forum/topico-metodo-scrollplacar-31279

No final ele sugere fazer da seguinte forma:

$("html, body").animate({

    // Resto do código aqui
},1000);

Testei mas continuo tendo o mesmo erro

Posta seu código com essas alterações pra que eu dê uma olhada

function scrollPlacar() {
  var posicaoPlacar = $(".placar").offset().top;
  console.log(posicaoPlacar);
  $("html,body").animate(
    {
    scrollTop: posicaoPlacar+"px"
  },1000);
}

function novaLinha(usuario,palavras) {
  var linha = $("<tr>");
  var colunaUsuario = $("<td>").text(usuario);
  var colunaPalavras = $("<td>").text(palavras);
  var colunaRemover = $("<td>");

  var link = $("<a>").addClass("botao-remover").attr("href","#");
  var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

  link.append(icone);

  colunaRemover.append(link);

  linha.append(colunaUsuario);
  linha.append(colunaPalavras);
  linha.append(colunaRemover);
  return linha;
}

function removeLinha() {
    event.preventDefault();
    var linha = $(this).parent().parent();
    linha.fadeOut();
    setTimeout(function(){
      linha.remove();
    },1000);
}


function mostraPlacar() {
  $(".placar").stop().slideToggle(600);
}

function sincronizaPlacar() {
  var placar = [];
  var linhas = $("tbody>tr");
  linhas.each(function(){
     var usuario = $(this).find("td:nth-child(1)").text();
     var palavras = $(this).find("td:nth-child(2)").text();

     var score = {
       usuario: usuario,
       palavras: palavras
     };
     placar.push(score);
  });

  var dados = {
    placar: placar
  };
  $.post("http://localhost:3000/placar",dados,function(){
    console.log("salvou o placar no servidor");
  })
}

function atualizaPlacar() {
   $.get("http://localhost:3000/placar",function(data) {
    $(data).each(function () {
       var linha = novaLinha(this.usuario, this.palavras);
       linha.find(".botao-remover").click(removeLinha);
       $("tbody").append(linha);
    });
  });
}

Obrigado por me deixarem sem nenhuma resposta o código continua sem mostrar o menu já tentei de todas as maneiras possiveis mas ele não mostra a animação

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software