CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jane
jane

Reputation: 241

pause slide on hover

I want a particular slide to stop as I hover the mouse on it.

The javascript code I tried :

$( ".rotate-slider" ).hover(function() {
  $( this ).find( ".rotate-slider" ).stop( true, true ).fadeOut();
}, function() {
  $( this ).find( ".rotate-slider" ).stop( true, true ).fadeIn();
});

also I tried to use css to get it :

.rotating-slide:hover .slider
{
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

Unfortunately,none of the above code seems to work.

Upvotes: 2

Views: 1577

Answers (1)

Bharatsing Parmar
Bharatsing Parmar

Reputation: 2455

You can check updated code here : jsfiddle.net/bharatsing/mqv1w538/8/

You need to user clearInterval when hover and on hover out need to init it again

$( ".rotate-slider li" ).hover(function() {      
    clearInterval(rotateInterval);
}, function() {
  rotateInterval = window.setInterval(function(){
                if(!rotateSlider.slidesContainer.hasClass('animate')){
                    rotateSlider.slidesContainer.addClass('animate')
                }
                currentRotation = currentRotation - rotateSlider.slideAngle;
                rotateSlider.slidesContainer.css('transform', 'translateX(-50%) rotate('+currentRotation+'deg)');
            }, 4000);
});

Upvotes: 2

Related Questions