Forum PHP.pl > [JavaScript] Zatrzymanie animacji po najechaniu myszą

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Zatrzymanie animacji po najechaniu myszą

php11

1.05.2017, 10:12:03

Moi drodzy,

jak zatrzymać animację, gdy najadę myszą na element?

[PHP] pobierz, plaintext 
var slides = document.querySelectorAll('.mojSlider li');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
 
function nextSlide(){
	slides[currentSlide].className = 'slajd';
	currentSlide = (currentSlide+1)%slides.length;
	slides[currentSlide].className = 'slajd aktywny';
}
[PHP] pobierz, plaintext

To powinno zadziałać, ale nie potrafię prawidłowo umieścić w moim kodzie

[PHP] pobierz, plaintext 
$(function() {
    $('marquee').mouseover(function() {
        $(this).attr('scrollamount',0);
    }).mouseout(function() {
         $(this).attr('scrollamount',5);
    });
});
[PHP] pobierz, plaintext

mortus

1.05.2017, 13:37:59

Trzeba dodać onmouseover i onmouseout eventhandler do każdego slide'u. Pierwszy czyści slideInterval, a drugi ponownie go ustawia. Przykład dla elementów li posiadających klasę slajd:

[JAVASCRIPT] pobierz, plaintext 
var interval = setInterval(moveSlide, 3000);
var slides = document.getElementsByClassName("slajd");
for (var i = 0; i < slides.length; i++) {
  slides[i].onmouseover = stopSlider;
  slides[i].onmouseout = startSlider;
}
function startSlider() {
  console.log("Runned");
  interval = setInterval(moveSlide, 3000);	
}
function stopSlider() {
  console.log("Stopped");
  clearInterval(interval);
}
function moveSlide() {
  console.log("Moved to next slide");
}
[JAVASCRIPT] pobierz, plaintext

trueblue

1.05.2017, 15:52:51

Kod

document.querySelector('.mojSlider').addEventListener('mouseenter',function(){
clearInterval(slideInterval);
});
document.querySelector('.mojSlider').addEventListener('mouseleave',function(){
slideInterval = setInterval(nextSlide,2000);
});

lub definiujesz zmienną paused (początkowo false). Przy mouseover paused=true, przy mouseleave paused=true. W funkcji nextSlide sprawdzenie czy paused jest true.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.