Question

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

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

注意 不会影响这一点，但它是在wysiwyg程序中完成的，所以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);
}

});

Answer 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(); }
    );

有没有更好的方法来显示暂停悬停在这个简单的幻灯片中？

1 个答案: