暂停jQuery悬停（鼠标悬停）
问题描述：
我环顾四周，但没有找到任何东西，请参阅下面的代码。暂停jQuery悬停（鼠标悬停）
考虑到这一点，我只需要能够在鼠标悬停时暂停动画。
感谢您的帮助！
(function ($) {
\t $.fn.textSlider = function (options) {
\t \t /* Default settings */
\t \t var settings = $.extend(
\t \t \t {
\t \t \t \t timeout: 2000,
\t \t \t \t slideTime: 750,
\t \t \t },
\t \t \t options
\t \t);
\t \t var nextItem;
\t \t var currentItem = 0;
\t \t var count = 0;
\t \t this.children('.slider-item').each(
\t \t \t function()
\t \t \t {
\t \t \t \t $(this).addClass('slide-' + (count))
\t \t \t \t \t .css(
\t \t \t \t \t \t {
\t \t \t \t \t \t \t //opacity: \t 0,
\t \t \t \t \t \t \t //paddingTop: \t '100px',
\t \t \t \t \t \t \t //paddingBottom: '0px'
\t \t \t \t \t \t }
\t \t \t \t \t);
\t \t \t \t $(this).hide();
\t \t \t \t count++;
\t \t \t }
\t \t);
\t \t function firstSlide()
\t \t {
\t \t \t $('.slide-' + currentItem).show().animate({
\t \t \t \t //paddingTop: '0px', paddingBottom: '50px',
\t \t \t \t opacity: 1 }, settings.slideTime);
\t \t \t setTimeout (transition, settings.timeout);
\t \t }
\t \t function transition()
\t \t {
\t \t \t nextItem = parseInt (currentItem + 1);
\t \t \t if (nextItem >= count)
\t \t \t \t nextItem = 0;
\t \t \t $('.slide-' + currentItem).animate({
\t \t \t \t //paddingTop: '100px', paddingBottom: '0px',
\t \t \t \t opacity: 0 }, settings.slideTime, function() {
\t \t \t \t \t $(this).hide();
\t \t \t \t \t $('.slide-' + nextItem).show().animate({
\t \t \t \t \t \t //paddingTop: '0px', paddingBottom: '50px',
\t \t \t \t \t \t opacity: 1 }, settings.slideTime);
\t \t \t });
\t \t \t currentItem = nextItem;
\t \t \t setTimeout (transition, settings.timeout);
\t \t }
\t \t return firstSlide();
\t };
}(jQuery));
// Start the Text Slider
\t $('.slide').textSlider({
\t \t timeout: 5000,
\t \t slideTime: 650,
\t \t loop: 1
\t });/* Main Message & Text */
.main-message {
\t font-size: 150%;
\t font-weight: bold;
\t padding-bottom: 20px;
\t margin-left: 20px;
}
.main-text {
\t font-size: 110%;
\t margin-left: 20px;
}<!-- Start Text Slider -->
\t \t <div class="slide">
\t \t \t <div class="slider-item">
\t \t \t \t <div class="main-message">Test 1</div>
\t \t \t \t <div class="main-text">Sub text here 1</div>
\t \t \t </div>
\t \t \t <div class="slider-item">
\t \t \t \t <div class="main-message">Test 2</div>
\t \t \t \t <div class="main-text">Sub text here 2</div>
\t \t \t </div>
\t \t \t <div class="slider-item">
\t \t \t \t <div class="main-message">Test 3</div>
\t \t \t \t <div class="main-text">Sub text here 3</div>
\t \t \t </div>
\t \t </div>
\t \t <!-- End Text Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
答
在你功能转换（）{...你可以在开头添加：
// if mouse is hover element call again the settimeout...
if ($('.slide-' + currentItem + ':hover').length != 0) {
setTimeout(transition, settings.timeout);
return;
}
不同的溶胶ution可以基于.hover()，添加以下事件处理程序：
this.children('.slider-item').hover(
function (e) {
$(this).addClass('hover');
},
function (e) {
$(this).removeClass('hover');
}
);
和，因此，与改变第一建议的代码：
// if element has hover class call again the settimeout...
if ($('.slide-' + currentItem + '.hover').length != 0) {
setTimeout(transition, settings.timeout);
return;
}
的片段：
(function ($) {
$.fn.textSlider = function (options) {
/* Default settings */
var settings = $.extend(
{
timeout: 2000,
slideTime: 750,
},
options
);
var nextItem;
var currentItem = 0;
var count = 0;
this.children('.slider-item').each(function() {
$(this).addClass('slide-' + (count))
.css({
//opacity: \t 0,
//paddingTop: \t '100px',
//paddingBottom: '0px'
}
);
$(this).hide();
count++;
}
);
this.children('.slider-item').hover(
function (e) {
$(this).addClass('hover');
},
function (e) {
$(this).removeClass('hover');
}
);
function firstSlide() {
$('.slide-' + currentItem).show().animate({
//paddingTop: '0px', paddingBottom: '50px',
opacity: 1
}, settings.slideTime);
setTimeout(transition, settings.timeout);
}
function transition() {
if ($('.slide-' + currentItem + '.hover').length != 0) {
setTimeout(transition, settings.timeout);
return;
}
nextItem = parseInt(currentItem + 1);
if (nextItem >= count)
nextItem = 0;
$('.slide-' + currentItem).animate({
//paddingTop: '100px', paddingBottom: '0px',
opacity: 0
}, settings.slideTime, function() {
$(this).hide();
$('.slide-' + nextItem).show().animate({
//paddingTop: '0px', paddingBottom: '50px',
opacity: 1
}, settings.slideTime);
});
currentItem = nextItem;
setTimeout(transition, settings.timeout);
}
return firstSlide();
};
}(jQuery));
// Start the Text Slider
$('.slide').textSlider({
timeout: 1000,
slideTime: 350,
loop: 1
});.main-message {
font-size: 150%;
font-weight: bold;
padding-bottom: 20px;
margin-left: 20px;
}
.main-text {
font-size: 110%;
margin-left: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="slide">
<div class="slider-item">
<div class="main-message">Test 1</div>
<div class="main-text">Sub text here 1</div>
</div>
<div class="slider-item">
<div class="main-message">Test 2</div>
<div class="main-text">Sub text here 2</div>
</div>
<div class="slider-item">
<div class="main-message">Test 3</div>
<div class="main-text">Sub text here 3</div>
</div>
</div>
答
默认情况下，jQuery的不支持暂停动画，但是，像往常一样，有一个为一个插件：http://tobia.github.io/Pause/
+0
你可以悬停克隆'$（'。slide-'+ cur rentItem）'元素，隐藏滑块并将克隆的元素附加到滑块容器，然后在鼠标移出时移除克隆元素并再次使滑块可见...还跟踪'currentItem'，以便可以将相同的值分配给滑块并使其看起来连续... –
+1
即使元素被隐藏，原始动画也会继续运行，因此当您再次显示该元素时，会出现不透明的突然跳跃。你可能能够解决这个问题，但在我看来，代码很快会变得非常复杂。 –
谢谢，这工作！我最想添加的最后一件事是在文本底部的子弹导航，以便从一个文本滚动到另一个文本。但是否则这是非常好的：D –
@LuisM非常感谢。对于子弹你需要做出更多的变化：自动播放：开/关，步骤... – gaetanoM
@LuisM对于子弹，你可以采取lokk [纯CSS滑块 - 自动播放，kenburns，prev/next，子弹 - 没有js ！]（https://codepen.io/hw/pen/biEBz） – gaetanoM