jQuery Pausing on mouseover in a text rotator

edbehn · 09-08-2012, 06:41 PM

I have some code that rotates quotes using jQuery fadein and fadeout. I would like to pause the rotation if a user mouses over the text and resume on mouse out. Any guidance or code snippets wuld be appreciated. Here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <title>jQuery Text Rotator - by Vijay Joshi | vijayjoshi.org</title>
        <style type="text/css">
            body {
                background-color:#BCDFDB;
                color: #000000;
                font-family: Times New Roman, Times, serif;
            }
            #quotes {
                margin:0;
                padding:100px;
                font-size:18px;
                position:relative;
            }
            .textItem {
                position:absolute;
                text-align: center;
                display:none;
            }
            a {
                color:#000;
                font-size:15px;
            }
        </style>
    </head>
    
    <body>
        <div id="quotes">
            <div class="textItem">Before turning to those moral and mental aspects of the matter which present
                the greatest difficulties, let the inquirer begin by mastering more elementary
                problems.</div>
            <div class="textItem">How often have I said to you that when you have eliminated the impossible,
                whatever remains, however improbable, must be the truth?</div>
            <div class="textItem">It is a capital mistake to theorize before one has data. Insensibly one
                begins to twist facts to suit theories, instead of theories to suit facts.</div>
            <div
            class="textItem">We must fall back upon the old axiom that when all other contingencies
                fail, whatever remains, however improbable, must be the truth.</div>
        </div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                setupRotator();
            });

            function setupRotator() {
                if ($('.textItem').length > 1) {
                    $('.textItem:first').addClass('current').fadeIn(1000);
                    intervalId = setInterval('textRotate()', 3000);
                }

            }

            function textRotate() {
                var current = $('#quotes > .current');
                if (current.next().length == 0) {
                    current.removeClass('current').fadeOut(1000);
                    $('.textItem:first').addClass('current').fadeIn(1000);
                } else {
                    current.removeClass('current').fadeOut(1000);
                    current.next().addClass('current').fadeIn(1000);
                }
            }
        </script>
    </body>

</html>

edbehn · 09-10-2012, 11:34 AM

To activate a function when a mouseenters or leaves the text area just set a .mouseenter and .mouseleave function on the text class. Here is the revised ready function.

Code:

            $(document).ready(function () {
   
                $('.textItem').mouseenter(function () {
                    clearInterval(intervalId);
                });
                $('.textItem').mouseleave(function () {
                     $(this).fadeOut(1000);
	             textRotate();
                     intervalId = setInterval('textRotate()', 3000);
                });
	        setupRotator();
            });