0

有没有更好的方法将悬停添加到这个简单的幻灯片中。我希望 div 像这样淡入以显示它已暂停，这是我能想到的唯一方法。我还在学习 jQuery。

这是 24 小时演示：http ://trialsites.ihoststudio.com/trialsite366742/website/

注意 不影响这一点，但它是在所见即所得的程序中完成的，因此 html 是有限的

CSS：

#pause { 
display: none;
width: 70px;
background: white; 
padding: 2px;
border-radius: 6px;
border:1px solid black; 
font:15px/1.1em arial;
color: black;
text-align:center;
}

jQuery：

$(function() {
var intervalId;
$("#A > div:gt(0)").hide();
startInterval();
$('#A > div').mouseover(function() { stopInterval(); });
$('#A > div').mouseout(function() { startInterval(); });
$('#A > div').hover(
function() { $('#pause').fadeIn(); },
function() { $('#pause').fadeOut(); }
);

function stopInterval() {
clearInterval(intervalId);
}

function startInterval() {
intervalId = setInterval(function() {
$("#A > div:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#A');
}, 3000);
}

});
4

1 回答 1

1

不要忘记将 .stop() 添加到您的动画中。

$('#pause').stop().fadeIn();

阅读此内容以供参考： http: //www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

您可能还需要考虑更改此设置：

$('#A > div').mouseover(function() { stopInterval(); });
$('#A > div').mouseout(function() { startInterval(); });
$('#A > div').hover(
function() { $('#pause').fadeIn(); },
function() { $('#pause').fadeOut(); }
);

对此：

    $('#A > div').hover(
        function() { stopInterval(); $('#pause').fadeIn(); },
        function() { startInterval(); $('#pause').fadeOut(); }
    );
于 2013-03-24T05:04:46.277 回答