Pause Jquery script on mouseover

Question

Pause Jquery script on mouseover

1.6k views Asked by Spiro At 26 November 2014 at 14:45

I use this little code snippet for a jquery news ticker:

var speed = 5;
var items, scroller = $('#scroller');
var width = 0;

scroller.children().each(function(){
    width += $(this).outerWidth(true);
});

scroller.css('width', width);

scroll();

function scroll(){
    items = scroller.children();
    var scrollWidth = items.eq(0).outerWidth();
    scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
}

function changeFirst(){
    scroller.append(items.eq(0).remove()).css('left', 0);
    scroll();
}

I try to pause the script when mouseover.

Using stop() function, it works but it loses speed every time I pass my mouse over.

I know their is something to do with width / distance / speed but I'm unable to correct it.

Here is the full script: http://codepen.io/anon/pen/wBayyz

Thank You.

Original Q&A

There are 3 answers

Daniel Edholm Ignat On 26 November 2014 at 14:53

You could try using this plugin: http://tobia.github.io/Pause/

Jose Rui Santos On 26 November 2014 at 15:13

You really don't need javascript. Most current browsers support CSS only animation, for the kind of task you have in hands.

#scroller {
  display: inline-block;
  margin:0;
  padding:0;
  line-height:30px;
  -webkit-animation: roll 10s infinite linear;
  -moz-animation: roll 10s infinite linear;
  -o-animation: roll 10s infinite linear;
  animation: roll 10s infinite linear;
}

#scroller:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes roll {
 from { -webkit-transform: translateX(100%); }
 to { -webkit-transform: translateX(-100%); }
}

@-moz-keyframes roll {
 from { -moz-transform: translateX(100%); }
 to { -moz-transform: translateX(-100%); }
}

@-o-keyframes roll {
 from { -o-transform: translateX(100%); }
 to { -o-transform: translateX(-100%); }
}

@keyframes roll {
 from { transform: translateX(100%); }
 to { transform: translateX(-100%); }
}


#scroller li {
  display: inline-block;
  height:30px;
  padding:0 0 0 10px;
  list-style-position:inside;
}

#scrollerWrapper {
  display: inline-block;
  width: 500px;
  height:30px;
  margin:30px;
  overflow:hidden;
  border:1px #333 solid;
  background:#F2F2F2;
  white-space: nowrap;
}

<html>
<head>
<title>Horizontal scroller</title>
</head>
<body>
  
<div id="scrollerWrapper">
  
  <ul id="scroller">

    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

    <li> Maecenas sollicitudin, ante id ultrices consectetur.</li>

    <li>Cum sociis natoque penatibus et magnis dis parturient. </li>

  </ul>
  
</div>
</body>
</html>

**Shriike** · Accepted Answer · 2014-11-26 14:56:22

$(document).ready(function(){
  
    var speed = 5;
    var items, scroller = $('#scroller');
    var width = 0;
  
    scroller.children().each(function(){
        width += $(this).outerWidth(true);
    });
  
    scroller.css('width', width);
  
    scroll();
    
    function scroll(){
        items = scroller.children();
        var scrollWidth = items.eq(0).outerWidth();
        scroller.animate({'left' : (items.eq(0).offset().left - 39) - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
    }
  
    function changeFirst(){
        scroller.append(items.eq(0).remove()).css('left', 0);
        scroll();
    }
  $("#scroller").hover(function() {
  $(this).stop();
}, function() {scroll();});
});

#scroller{height:100%;margin:0;padding:0;line-height:30px;position:relative;}

#scroller li{float:left;height:30px;padding:0 0 0 10px;list-style-position:inside;}

#scrollerWrapper{width: 500px; height:30px;margin:30px;overflow:hidden;border:1px #333 solid;background:#F2F2F2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Horizontal scroller</title>
</head>
<body>
  
<div id="scrollerWrapper">
  
  <ul id="scroller">

    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

    <li> Maecenas sollicitudin, ante id ultrices consectetur.</li>

    <li>Cum sociis natoque penatibus et magnis dis parturient. </li>

  </ul>
  
</div>
</body>
</html>

The problem was when you were restarting the scrolling you need to take into consideration how much has been scrolled already, like I've done here.

This should be what you're looking for,

TechQA.

Pause Jquery script on mouseover

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in MOUSEOVER

Related Questions in TICKER

Related Questions in NEWS-TICKER

Popular Questions

Popular Tags

Trending Questions