Felexan,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
p {background-color:pink; cursor:pointer;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
function rund(e, f) {
function d(b) {
for (var a = b.length - 1; 0 < a; a--) {
var c = Math.floor(Math.random() * (a + 1)),
d = b[c];
b[c] = b[a];
b[a] = d
}
return b
}
var a = [],
c = [];
for (i = 0; i < e; i++) a[i] = i + f;
d(a);
return function () {
var b = a.shift();
c.push(b);
1 == a.length && (d(c), a = a.concat(c), c = []);
return b
}
};
var $p = $('#anidiv p'), len = $p.length, num = rund(len, 0);
$p.not(':eq(' + num() + ')').hide();
function InOut() {
$("#anidiv p:visible").delay(5000).fadeOut(600, function () {
$p.eq(num()).fadeIn(600, InOut);
})
};
InOut();
$('#anidiv p').mouseover(function () {
$(this).stop(true, true);
});
$('#anidiv p').mouseout(function () {
InOut();
});
})
</script>
</head>
<body>
<div id="anidiv">
<p>Pause jquery animation on mouseover 1...</p>
<p>Pause jquery animation on mouseover 2...</p>
<p>Pause jquery animation on mouseover 3...</p>
<p>Pause jquery animation on mouseover 4...</p>
</div>
</body>
</html>