Vishnu Vishnu - 1 month ago 9
CSS Question

How to stop this jquery marquee scrolling on mouse over

I have used the following jquery marquee, but it couldn't stop on mouse over.. is any solution in jquery......



<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>

<script type="text/javascript">
$('.marquee').marquee({
//speed in milliseconds of the marquee
duration: 10000,
//gap in pixels between the tickers
gap: 100,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
</script>

.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}

<div class="marquee">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>




Mox Mox
Answer
$(".marquee").on("mouseover", function(e){
    $(this).marquee("toggle");
});

use the "toggle" method to pause and resume the animation.