CODEWITHSUNDEEP
javascriptjqueryslider
Sam Chahine
Sam Chahine

Reputation: 630

How to stop mouseenter function when mouseout

This is the code I'm using for a slider

    jQuery(document).ready(function ($) {

    setInterval(function () {
        moveRight();
    }, 1000);

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };


    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

I tried creating a function that makes the slideshow slower on hover and go back to normal why the cursor is off of it. This is my code.

 function moveNot() {
            $('#slider ul').animate({
                left: - slideWidth
            }, 20000, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };



        $('#slider').mouseover(function () {

            moveNot();

        });

        $('#slider').mouseout(function () {

            setInterval(function () {
            moveRight();
        }, 1000);

        });

I was able to make the slider go slower, but the mouseout or mouseleave (tried both) don't work, I don't know what else to do.

How would I stop the slider on hover and make the slider go when the mouse is off?

Upvotes: 1

Views: 1264

Answers (4)

nitish koundade
nitish koundade

Reputation: 801

Please try the following code.

  	

jQuery(document).ready(function ($) {
    		var slidetime = 500;	
         var t;
        $('#slider li').on('mouseout',function(){
          slidetime = 500;
          clearInterval(t);
          startAnimation();
        }); 
    	  $('#slider li').on('mouseenter',function(){
          //slidetime = 1000; if want to make it slower uncomment it
          clearInterval(t);
         //startAnimation(); if want to make it slower uncomment it
        });
        function startAnimation(){
        	 t = setInterval(function () {
            moveRight();
           }, slidetime);
        }
        startAnimation();
      
        var slideCount = $('#slider ul li').length;
        var slideWidth = $('#slider ul li').width();
        var slideHeight = $('#slider ul li').height();
     		var sliderUlWidth = slideCount * slideWidth;

        $('#slider').css({ width: slideWidth, height: slideHeight });

        $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

        $('#slider ul li:last-child').prependTo('#slider ul');

        function moveLeft() {
            $('#slider ul').animate({
                left: + slideWidth
            }, slidetime, function () {
                $('#slider ul li:last-child').prependTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };

        function moveRight() {
            $('#slider ul').animate({
                left: - slideWidth
            }, slidetime, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };

    });  
    li{
      width:100px;
      height:100px;
      float:left;
      display:block;
      }
      ul:nth-child(even){
        background:red;
       }
      ul:nth-child(odd){
        background:black;
        color:red;
      }
      ul{
        display:inline-flex;
      }
      #slider{
        width:100px;
        overflow:hidden;
        }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="slider">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    </div>

Here is the JSfiddle Link

Upvotes: 3

Vixed
Vixed

Reputation: 3499

Use instead hover instead of mouseover and mouseout

$('#slider').hover(function(){
    moveNot()
    },function () {
        setInterval(function(){
            moveRight()
    }, 1000)
});

Upvotes: 0

Jai
Jai

Reputation: 74738

Before anything you should add the setInterval to a variable and you can clear it with clearInterval() before calling the same function again. I guess you should pass time as an argument in the specific function: 

jQuery(document).ready(function ($) {
   var time, 
       callRight = function(time){
          time = setInterval(function () {
              moveRight(time);
          }, time);
       };

       callRight(200); // <----call it here

       // other code as is

});

Now these are the changes you should use: 

function moveRight(time) {// <----pass the duration here.
  $('#slider ul').stop(true, true).animate({
    left: -slideWidth
  }, time, function() {// <----add the duration here.
    $('#slider ul li:first-child').appendTo('#slider ul');
    $('#slider ul').css('left', '');
  });
};

function moveNot(time) { // <----pass the duration here.
  $('#slider ul').stop(true, true).animate({
    left: -slideWidth
  }, time, function() { // <----add the duration here.
    $('#slider ul li:first-child').appendTo('#slider ul');
    $('#slider ul').css('left', '');
  });
};

$('#slider').on('mouseenter mouseleave', function(e) {
  if(e.type === 'mouseenter' && time){
     clearInterval(time); 
     moveNot(20000);
  } else {
     callRight(200);
  }
});

Upvotes: 0

ken
ken

Reputation: 121

An obvious issue with your code is the mouseout function, that it would repeatedly setInterval. Note that you need to call clearInterval() to "un-register" the function if you want it stops running...

To your question

How would I stop the slider on hover and make the slider go when the mouse is off?

You might try something like this:

var myVar;  // rename it to something makes sense to you

$('#slider').mouseover(function(){
    clearInterval(myVar);
});

$('#slider').mouseout(function (){
    myVar = setInterval(function(){
        moveRight();
    }, 1000);
});

Take a look at the clearInterval function here.

Upvotes: 0

Related Questions