1

Ola estou com uma função .hover aonde eu gostaria que na segunda instancia (mouseleave) ocorre-se um delay para que o que esta dentro da função ocorra, ja tentei setar dentro da segunda função um setTimeout, tentei referenciar dentro do .hover, ".hover(function(){}, setTimeout(function(){});), mas ainda assim não consegui um resultado efetivo. Função abaixo:

    $("#lista-interface").on("mouseover", ".tarefas", function(){
        $(this).hover(function(){
            let divO = document.createElement("div");
            $(divO).attr({"class":("button" + " left"),});
            let divT = document.createElement("div");
            $(divT).attr({"class":("button" + " rigth"),});
            let divTR = document.createElement("div");
            $(divTR).attr({"class":("button" + " delete"),});
            $(this).append(divO);
            $(this).append(divT);
            $(this).append(divTR);
        }, function(){

            $("div").remove(".button, .left");
            $("div").remove(".button, .rigth");
            $("div").remove(".button, .delete");
            set
        });
    });

alguma ideia de como isso possa ser efeito, ou se teria alguma outra forma de eu conseguir o mesmo efeito.

2
  • Pq não usa $("#lista-interface .tarefas").hover direto sem ter que usar um mouseover antes?
    – Sam
    Commented 25/11/2019 às 21:29
  • Por que eu estava tendo conflitos com essa função pois a class .tarefas so aparece depois que a pagina é carregada por completo, ai eu precisei linkar o over a um item que ja se encontra inicialmente na pagina pra que quando ocorra o evento não tenha conflitos Commented 25/11/2019 às 21:32

1 Resposta 1

1

Colocar um evento dentro do outro não é uma boa prática porque ao chamar o primeiro, irá criar múltiplos listeners do segundo. Por exemplo, ao chamar o mouseover, irá criar múltiplos .hover(), ou seja, quando você chamar o mouseover pela segunda vez, irá disparar o .hover() 2 vezes, e assim consecutivamente.

Para resolver a questão do delay, você incluir o código da segunda função na função do setTimeout:

setTimeout(function(){
   $("div").remove(".button, .left");
   $("div").remove(".button, .rigth");
   $("div").remove(".button, .delete");
}, 2000); // executa após 2 segundos

Em relação ao problema descrito no início, eu sugeriria não utilizar .hover(). Você pode usar os dois eventos do .hover() de forma com que funcione mesmo se os elementos ainda não tiverem no DOM, basta usar um if...else verificando qual o evento foi disparado:

$(document).on("mouseenter mouseleave", "#lista-interface .tarefas", function(event){

     if(event.type == "mouseenter"){
         let divO = document.createElement("div");
         $(divO).attr({"class":("button" + " left"),});
         let divT = document.createElement("div");
         $(divT).attr({"class":("button" + " rigth"),});
         let divTR = document.createElement("div");
         $(divTR).attr({"class":("button" + " delete"),});
         $(this).append(divO);
         $(this).append(divT);
         $(this).append(divTR);
     }else if(event.type == "mouseleave"){
        setTimeout(function(){
            $("div").remove(".button, .left");
            $("div").remove(".button, .rigth");
            $("div").remove(".button, .delete");
        }, 2000);
     }
});
6
  • Não sabia que poderia usar o on() dessa forma, agora uma duvida minha, o function(event) quando passado dessa forma o interpretador entende que o que esta sendo passado é um evento? ou se eu colocasse qualquer nome dentro do parenteses do function ele passaria o mesmo "valor" para a função. Commented 25/11/2019 às 21:48
  • Pode colocar qualquer nome sim.
    – Sam
    Commented 25/11/2019 às 21:48
  • Compreendo verificando o evento dessa forma eu acabei tendo um outro conflito veja, essa class .tarefas é atribuida a uma div que contem duas textareas, da forma que eu aprensentei anteriormente mesmo o mouse se encontrava sobre a textarea mas ainda no escopo da div os buttons eram exibidos, porem da forma com que me passou o delay começa a contar mesmo que o mouse esteja sobre a textarea, alguma ideia de como poderia resolver isso? Commented 25/11/2019 às 21:54
  • Vou analisar aqui pra vc....
    – Sam
    Commented 25/11/2019 às 21:55
  • Olha eu retirei o else if e deixei só o if no mouseleave e aparentemente esta funcionando muito bem, creio que possa ser conflitos com outra funções minhas pois sou novo com js e jquery, logo meu codigo ta uma bagunça então pode ser que seja algo aqui comigo mesmo. Commented 25/11/2019 às 22:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .