I have a little jQuery snippet that will fadeIn and fadeOut a group of divs over a select interval. I now need to pause this fadeIn fadeOut on hover, then resume on mouse out. Any help is appreciated. Here is the relevant code.
The following is what is located in my body
<div class="gcRotate">
<div class="gcRotateContent">
<div style="border: solid 2px black; text-align: center; width: 150px;">
This is first
content
<img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg"
alt="Dude" />
</div>
</div>
<div class="gcRotateContent">
<div style="border: solid 2px black; text-align: center; width: 150px">
This is second
content
<img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg"
alt="Dude" />
</div>
</div>
<div class="gcRotateContent">
<div style="border: solid 2px black; text-align: center; width: 150px">
This is third
content
<img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Dude" />
</div>
</div>
</div>
<div>
This shouldn't move.
</div>
<script type="text/javascript">
function fadeContent() {
$(".gcRotate .gcRotateContent:hidden:first").fadeIn(500).delay(2000).fadeOut(500, function() {
$(this).appendTo($(this).parent());
fadeContent();
});
}
$(".gcRotate").height(0);
$(".gcRotateContent").each(
function() {
if ($(".gcRotate").height() < $(this).height()) {
$(".gcRotate").height($(this).height());
}
}
);
$(".gcRotateContent").each(function() {
$(this).css("display", "none")
});
fadeContent();
</script>
