0

この単純なスライドショーにホバーを追加するより良い方法はありますか? 一時停止していることを示すために、このようにdivをフェードインさせたいのですが、これが私が思いついた唯一の方法でした。私はまだjQueryを学んでいます。

これは 24 時間のデモです: 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);
}

});
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 に答える