Riavvio dei fotogrammi chiave al clic

Question

Ho delle bolle che si muovono con i fotogrammi chiave, ma sono pulsanti che anch'io voglio scomparire quando si fa clic e si riavvia automaticamente allo 0%. Ho chiamato onmousedown e onmouseup per farlo ma non sembra funzionare. Qualche idea?

$(document).ready() { 
 
    function Bubbles() { 
 
    $(".bubble_cluster_one").css("opacity", "0"); 
 

 
    } 
 

 
    function Bubbles2() { 
 
    $("bubble_cluster_one").css("top": "400px", "opacity": "1"); 
 

 
    } 
 
}

.bubble_cluster_one { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-animation: bubble_cluster_one 8s infinite; 
 
    left: 150px; 
 
    z-index: +1; 
 
} 
 
.bubble_cluster_one input { 
 
    width: 40px; 
 
    height: 60px; 
 
} 
 
@-webkit-keyframes bubble_cluster_one { 
 
    0% { 
 
    top: 400px; 
 
    } 
 
    100% { 
 
    top: -70px; 
 
    } 
 
}

<div class="bubble_cluster_one"> 
 
    <input type="image" src="bubbles_1.png" alt="button" onmousedown="Bubbles()" onmouseup="Bubbles2()"> 
 
</div>

Answer 1

Hai un rotto, modello impraticabile.

In primo luogo, l'involucro corretta dovrebbe essere:

$(document).ready(function() { 
    ... 
}); 

//or 

$(function() { 
    ... 
}); 

Ma se lo fai, allora Bubbles() e Bubbles2() sono irraggiungibili dai gestori di eventi collegati come HTML "attributi".

Pertanto, collegare i gestori in JavaScript:

$(function() { 
    function Bubbles() { 
     $(this).css("opacity", "0"); 
    } 
    function Bubbles2() { 
     $(this).css("top": "400px", "opacity": "1"); 
    } 

    $(".bubble_cluster_one input") 
     .on('mousedown', Bubbles) 
     .on('mouseup', Bubbles2); 
}); 

alternativa, invia la bolla al suo fuori schermo direttamente, senza gingillarsi con l'opacità:

$(document).ready(function() { 
    $(".bubble_cluster_one input").on('mousedown', function() { 
     $(this).css({ "top": "400px" }); 
    }); 
}); 

Nota: Entrambi gli esempi differiscono dalle originale in quanto i gestori di eventi sono collegati al wrapper del cluster, non all'elemento di input. Potrebbe essere necessario regolare questo aspetto per ottenere l'effetto desiderato.

Answer 2

C'erano un paio di problemi nel frammento che è stato fornito in questione:

• librerie jQuery non sono stati inclusi.
• $(document).ready involucro è stato scritto erroneamente (dovrebbe essere scritto come accennato in risposta di Roamer-1888 ed i gestori di eventi devono essere collegati direttamente tramite JS. Questo è in realtà la migliore pratica invece di utilizzare gli attributi in linea.

Altro a parte queste due seguenti sono le cose che avete bisogno di nota per quanto riguarda le animazioni CSS:

• una volta che un infinito inizia l'animazione, continua ad essere in esecuzione fino al momento l'animazione viene rimosso dall'elemento Quindi, anche se. era nascosto usando opacity: 0, l'animazione era in esecuzione in background.
• Per riavviare un'animazione CSS, l'unico modo possibile è rimuovere l'animazione sull'elemento e aggiungerlo di nuovo dopo un ritardo.

• È possibile che questo non può essere fatto con mousedown e mouseup eventi perché quando l'animazione viene rimosso (sul mousedown) l'elemento ritorna alla sua posizione originale e le probabilità sono molto alte che il puntatore del mouse non è più sopra l'elemento è. Ciò significa che l'evento mouseup non viene generato perché si attiva solo quando il mouse è ancora sopra l'elemento.

  Da jQuery website: l'evento MouseUp viene inviato ad un elemento quando il puntatore del mouse si trova sopra l'elemento, e il pulsante del mouse viene rilasciato.

• Quindi la soluzione è quella di effettuare le seguenti operazioni:

  • utilizzare una classe specifica per le animation proprietà da solo, aggiungere questa classe in più per l'elemento. Questo non è obbligatorio ma rende più facile aggiungere o rimuovere l'animazione semplicemente aggiungendo/rimuovendo i metodi di classe.
  • utilizzare l'evento click sull'elemento, prima rimuovere la classe di animazione, impostare opacity-0 per nascondere l'elemento e dopo un piccolo ritardo (usando setTimeout) aggiungere la classe di animazione torna all'elemento e impostare il opacity di nuovo a 1.

$(document).ready(function() { 
 
    $(".bubble_cluster_one input").on('click', function() { 
 
    $(".bubble_cluster_one").removeClass("animation"); 
 
    $(".bubble_cluster_one").css("opacity", "0"); 
 
    setTimeout(
 
     function() { 
 
     $(".bubble_cluster_one").addClass("animation"); 
 
     $(".bubble_cluster_one").css("opacity", "1"); 
 
     }, 100); 
 
    }); 
 
});

.bubble_cluster_one { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 150px; 
 
    z-index: 1; 
 
} 
 
.animation { 
 
    animation: bubble_cluster_one 8s infinite; 
 
} 
 
.bubble_cluster_one input { 
 
    width: 40px; 
 
    height: 60px; 
 
} 
 
@keyframes bubble_cluster_one { 
 
    0% { 
 
    top: 400px; 
 
    } 
 
    100% { 
 
    top: -70px; 
 
    } 
 
}

<!-- prefix free library is only to avoid vendor prefixes --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bubble_cluster_one animation"> 
 
    <input type="image" src="bubbles_1.png" alt="button"> 
 
</div>

---

L'aggiunta di top: 400px su mouseup non funzionerebbe perché quando è in esecuzione un'animazione CSS, l'animazione ha il pieno controllo sulle proprietà che vengono utilizzate da esso. Solo le regole che possono ignorare l'animazione sono quelle che hanno !important. In genere è una cattiva pratica usare !important quando può essere evitato e quindi non raccomanderò questo modo di riavviare un'animazione.

Da Animations Spec: le animazioni CSS influiscono sui valori delle proprietà calcolate. Durante l'esecuzione di un'animazione, il valore calcolato per una proprietà è controllato dall'animazione. Questo sovrascrive il valore specificato nel normale sistema di stile. Le animazioni annullano tutte le normali regole, ma vengono sostituite da! Regole importanti.