我有一个小jQuery片段,它将在选择间隔内淡入和淡出一组div。我现在需要在悬停时暂停fadeIn fadeOut,然后在鼠标移出时继续。任何帮助表示赞赏。这是相关的代码。
以下是我体内的内容
<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>
答案 0 :(得分:0)
我自己想出了这个。
<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="First" />
</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="Second" />
</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="Third" />
</div>
</div>
</div>
<div>
This shouldn't move.
</div>
<script type="text/javascript">
function fadeContent() {
$(".gcRotateContent").first().fadeOut(500, function() {
$(".gcRotateContent:hidden:first").fadeIn(500)
});
$(".gcRotateContent").first().appendTo($(".gcRotateContent").parent());
}
$(".gcRotate").height(0);
$(".gcRotateContent").each(
function() {
if ($(".gcRotate").height() < $(this).height()) {
$(".gcRotate").height($(this).height());
}
}
);
$(".gcRotateContent").each(function() {
$(this).css("display", "none")
});
$(".gcRotate").hover(function() {window.clearInterval(timer)}, function() {timer = window.setInterval("fadeContent()", 2000)});
$(".gcRotateContent").first().show(0);
var timer = window.setInterval("fadeContent()", 2000);
</script>