объединяя Hover с оператором If в jQuery - PullRequest
Новая
       15

объединяя Hover с оператором If в jQuery

1 голос
/ 18 января 2012

Я использую плагин Cycle для слайд-шоу.Он имеет встроенную функцию «Пауза при наведении мыши», однако я хочу, чтобы элементы навигации также менялись при наведении мыши.

Это достаточно легко сделать, но я бы хотел сохранить паузу/ состояние воспроизведения.То есть, если пользователь нажал кнопку паузы, я ничего не хочу делать, когда он наводит курсор мыши.Однако, если они не сделали паузу, я бы хотел сделать что-нибудь при наведении курсора.

Вот код для нажатия кнопки паузы / воспроизведения: 

$('#pauseButton').click(function() {
    $('#news').cycle('pause');
    $('#pauseButton').hide();
    $('#playButton').show();
});
$('#playButton').click(function() {
    $('#news').cycle('resume');
    $('#pauseButton').show();
    $('#playButton').hide();
});

МойПервая попытка сделать это такова: 

$('#news div').hover(function() {
    $('#pauseButton').show();
    $('#playButton').hide();    
    $('#paused').css({background:"#ff9000"});
}, function(){
    $('#pauseButton').hide();
    $('#playButton').show();
});

Проблема заключается в том, что независимо от того, приостановил ли пользователь показ слайдов, при наведении мыши на него, а затем на выключение, слайд-шоу будет приостановлено.Похоже, что где-то там должно быть легко вставить выражение «если», но я не могу понять, куда именно оно пойдет.

1 Ответ

1 голос
/ 18 января 2012

Если вы отключите плагин «pause-on-mouseover», то вы можете сделать это самостоятельно: 

//setup a flag to detect if the show should play or not
var pause_show = false;

//pause on mouseover 
$('#slideshow-id').on('mouseover', function () {

    $('#news').cycle('pause');
    $('#pauseButton').hide();
    $('#playButton').show();

//play on mouseleave only if flag is not set to `false` (meaning the pause button has not been clicked)
}).on('mouseleave', function () {

    //if the show has not been paused with the pause button then resume the show
    if (pause_show === false) {
        $('#news').cycle('resume');
        $('#pauseButton').show();
        $('#playButton').hide();
    }
});

//set flag to true (block play on mouseleave) when the user clicks on the 
$('#pauseButton').on('click', function () {
    pause_show = true;
});
$('#playButton').on('click', function () {
    pause_show = false;
});

Обратите внимание, что .on() является новым в jQuery 1.7 и совпадает с .bind()в этом случае.

...