Dreamweaver CS6 - 如何在鼠标悬停时停止滑块?
Dreamweaver CS6 - How do I stop slider on mouseover?
下面是 jquery 代码。我想知道我必须在代码中如何以及在何处准确输入功能,当我越过滑块时它会暂停滑动。然后当我将鼠标移出时滑块,它继续滑动照片..
$(document).ready(function() {
$('.photo').hover(function() {
$(this)
.find('.caption')
.stop()
.animate({
bottom: '0'
}, {
duration: 2000,
easing: 'easeOutQuart'
});
}, function() {
$(this)
.find('.caption')
.stop()
.animate({
bottom: '-100px'
}, {
duration: 2000,
easing: 'easeOutQuart'
});
var interval = setInterval(slideSwitch, 2000);
});
});
您可以使用 jQuery 的 hover() 函数作为快捷方式:
$(function() {
var interval = setInterval( slideSwitch, 10000 );
$('#slideshow').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval( slideSwitch, 10000 );
});
});
这是 link 的 working example。
下面是 jquery 代码。我想知道我必须在代码中如何以及在何处准确输入功能,当我越过滑块时它会暂停滑动。然后当我将鼠标移出时滑块,它继续滑动照片..
$(document).ready(function() {
$('.photo').hover(function() {
$(this)
.find('.caption')
.stop()
.animate({
bottom: '0'
}, {
duration: 2000,
easing: 'easeOutQuart'
});
}, function() {
$(this)
.find('.caption')
.stop()
.animate({
bottom: '-100px'
}, {
duration: 2000,
easing: 'easeOutQuart'
});
var interval = setInterval(slideSwitch, 2000);
});
});
您可以使用 jQuery 的 hover() 函数作为快捷方式:
$(function() {
var interval = setInterval( slideSwitch, 10000 );
$('#slideshow').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval( slideSwitch, 10000 );
});
});
这是 link 的 working example。