Pause jQuery On Hover (Mouse Over)

Question

I looked around but didn't find anything, please see below for my code.

With that in mind, I just need the ability to be able to pause the animation on mouse hover.

Any assistance is gratefully appreciated!

(function ( $ ) {
	$.fn.textSlider = function ( options ) {

		/* Default settings */
		var settings = $.extend(
			{
				timeout: 2000,
				slideTime: 750,
			},
			options 
		);

		var nextItem;

		var currentItem = 0;
		var count = 0;

		this.children('.slider-item').each(
			function () 
			{
				$(this).addClass( 'slide-' + ( count ) )
					.css(
						{
							//opacity:	   0, 
							//paddingTop:	'100px',
							//paddingBottom: '0px'
						}
					);
				$(this).hide();
				count++;
			}
		);

		function firstSlide ()
		{
			$('.slide-' + currentItem ).show().animate({ 
				//paddingTop: '0px', paddingBottom: '50px', 
				opacity: 1 }, settings.slideTime);

			setTimeout ( transition, settings.timeout );
		}

		function transition ()
		{
			nextItem = parseInt ( currentItem + 1 );

			if ( nextItem >= count )
				nextItem = 0;

			$('.slide-' + currentItem ).animate({ 
				//paddingTop: '100px', paddingBottom: '0px', 
				opacity: 0 }, settings.slideTime, function () {
					$(this).hide();
					$('.slide-' + nextItem ).show().animate({ 
						//paddingTop: '0px', paddingBottom: '50px', 
						opacity: 1 }, settings.slideTime);
			});

			currentItem = nextItem;
			setTimeout ( transition, settings.timeout );
		}
		return firstSlide ();
	};
}( jQuery ));

// Start the Text Slider
	$('.slide').textSlider({
		timeout: 5000,
		slideTime: 650,
		loop: 1
	});

/* Main Message & Text */
.main-message {
	font-size: 150%;
	font-weight: bold;
	padding-bottom: 20px;
	margin-left: 20px;
}
.main-text {
	font-size: 110%;
	margin-left: 20px;
}

<!-- Start Text Slider -->
		<div class="slide">
			<div class="slider-item">
				<div class="main-message">Test 1</div>
				<div class="main-text">Sub text here 1</div>
			</div>
			<div class="slider-item">
				<div class="main-message">Test 2</div>
				<div class="main-text">Sub text here 2</div>
			</div>
			<div class="slider-item">
				<div class="main-message">Test 3</div>
				<div class="main-text">Sub text here 3</div>
			</div>
		</div>
		<!-- End Text Slider -->
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

In your function transition() {... you can add at the beginning:

// if mouse is hover element call again the settimeout...
if ($('.slide-' + currentItem + ':hover').length != 0) {
    setTimeout(transition, settings.timeout);
    return;
}

A different solution can be based on .hover(), adding the following event handler:

this.children('.slider-item').hover(
        function (e) {
            $(this).addClass('hover');
        },
        function (e) {
            $(this).removeClass('hover');
        }
);

and, so, changing the first suggested code with:

// if element has hover class call again the settimeout...
if ($('.slide-' + currentItem + '.hover').length != 0) {
    setTimeout(transition, settings.timeout);
    return;
}

The snippet:

(function ($) {
    $.fn.textSlider = function (options) {

        /* Default settings */
        var settings = $.extend(
                {
                    timeout: 2000,
                    slideTime: 750,
                },
                options
        );

        var nextItem;

        var currentItem = 0;
        var count = 0;

        this.children('.slider-item').each(function () {
                    $(this).addClass('slide-' + ( count ))
                            .css({
                                //opacity:	   0,
                                //paddingTop:	'100px',
                                //paddingBottom: '0px'
                            }
                    );
                    $(this).hide();
                    count++;
                }
        );
        
        this.children('.slider-item').hover(
                function (e) {
                    $(this).addClass('hover');
                },
                function (e) {
                    $(this).removeClass('hover');
                }
        );


        function firstSlide() {
            $('.slide-' + currentItem).show().animate({
                //paddingTop: '0px', paddingBottom: '50px',
                opacity: 1
            }, settings.slideTime);

            setTimeout(transition, settings.timeout);
        }

        function transition() {
            if ($('.slide-' + currentItem + '.hover').length != 0) {
                setTimeout(transition, settings.timeout);
                return;
            }
            nextItem = parseInt(currentItem + 1);

            if (nextItem >= count)
                nextItem = 0;

            $('.slide-' + currentItem).animate({
                //paddingTop: '100px', paddingBottom: '0px',
                opacity: 0
            }, settings.slideTime, function () {
                $(this).hide();
                $('.slide-' + nextItem).show().animate({
                    //paddingTop: '0px', paddingBottom: '50px',
                    opacity: 1
                }, settings.slideTime);
            });

            currentItem = nextItem;
            setTimeout(transition, settings.timeout);
        }

        return firstSlide();
    };
}(jQuery));


 // Start the Text Slider
$('.slide').textSlider({
    timeout: 1000,
    slideTime: 350,
    loop: 1
});

.main-message {
    font-size: 150%;
    font-weight: bold;
    padding-bottom: 20px;
    margin-left: 20px;
}

.main-text {
    font-size: 110%;
    margin-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div class="slide">
    <div class="slider-item">
        <div class="main-message">Test 1</div>
        <div class="main-text">Sub text here 1</div>
    </div>
    <div class="slider-item">
        <div class="main-message">Test 2</div>
        <div class="main-text">Sub text here 2</div>
    </div>
    <div class="slider-item">
        <div class="main-message">Test 3</div>
        <div class="main-text">Sub text here 3</div>
    </div>
</div>