Кнопки исчезновения / наведения при наведении курсора на изображение с помощью jQuery.Несколько ошибок, чтобы решить - PullRequest
Новая
       16

Кнопки исчезновения / наведения при наведении курсора на изображение с помощью jQuery.Несколько ошибок, чтобы решить

2 голосов
/ 21 августа 2011

Итак, у меня уже есть то, что я хочу, очень просто, но есть некоторые ошибки.Я просто хочу, чтобы при наведении курсора на изображение на изображении появлялись две кнопки «влево» и «вправо», которые позволяют переходить по другим изображениям.Затем, когда вы покидаете область изображения (исключая кнопки влево / вправо), кнопки снова исчезают.Вот что у меня есть: 

$(document).ready(function() {
    $('#image-slider').mouseenter(function(){
        $('.next').fadeIn('50');
        $('.prev').fadeIn('50');
    }).mouseout(function(){
        $('.next').fadeOut('50');
        $('.prev').fadeOut('50');
    });
});

Ошибка # 1: Однако, когда вы наводите курсор мыши на изображение, появляются кнопки, а если вы наводите курсор мыши на кнопки, они исчезают.Естественно, конечно, они делают это потому, что я сказал им исчезать, когда я покинул область изображения.Прежде всего, мне нужно, чтобы они оставались видимыми, даже когда вы наводите на них курсор.Поэтому мне нужно как-то включить кнопки как часть моей области изображения в моем JavaScript.Это первая проблема /

Ошибка № 2: Это распространенная проблема, которую я вижу в javascript.Когда вы наводите курсор мыши на изображение, кнопки постепенно исчезают, они исчезают.Конечно, для этого есть длительность, и если вы продолжаете зависать, входить / выходить / выходить / выходить / выходить / выходить до того, как продолжительность может закончиться, то когда вы позволите ей летать, она будет включаться, выключаться, включаться и выключаться.Как я могу предотвратить это?То есть, когда вы плавно выходите за пределы области изображения, когда кнопки постепенно исчезают, он просто останавливает последовательность анимации в своих дорожках, чтобы вы не получали непрерывного постепенного исчезновения.

Заранее спасибо!~ Джексон

ETA: исправление

Я понял это!Комбинация твоего исправления и @ Pumou's.

Я сделал еще один div, чтобы обернуть два элемента и расширил его, чтобы покрыть изображение, затем я установил курсор мыши на этот div.Проблема № 1 решена.

Я использовал трюк pufmo .fadeTo () для решения проблемы № 2.

Затем я использовал твики от всех, чтобы сократить код, чтобы он был аккуратным и аккуратным.Спасибо всем!

Я выбрал решение @ jfriend00.Это самая короткая, отличная работа!

Вот мой последний JavaScript: 

$(document).ready(function() {
    var b = $('.ps_next, .ps_prev');
    $('#slider-wrapper').bind('mouseenter mouseleave', function(e) {    
       var check = ( e.type === 'mouseenter' ) ?
          ( b.stop(0,1).fadeIn(100)  ) :
          ( b.stop(0,1).fadeOut(100) ) ;
    });
});

Ответы [ 4 ]

3 голосов
/ 21 августа 2011

Проблема № 2 может быть исправлена ​​с помощью .stop(), которая заставляет любую предыдущую анимацию просто завершиться до начала следующей. 

$(document).ready(function() {
    $('#imageContainer').hover(function() {
        $('.ps_next').stop(true, true).fadeIn(400);
        $('.ps_prev').stop(true, true).fadeIn(400);
    }, function () {
        $('.ps_next').stop(true, true).fadeOut(400);
        $('.ps_prev').stop(true, true).fadeOut(400);
    });
});

Может быть лучше использовать функцию .hover() jQueryкоторый обрабатывает как ввод, так и выход, а не mouseenter() и mouseout().

. Вы можете увидеть оба примера .stop() и .hover() на этой странице документации jQuery , выполняющей почтиТочно так же, как и вы.

Для задачи № 1, я думаю, нам нужно увидеть структуру вашего HTML-кода, чтобы узнать, как лучше всего посоветовать, так как их несколько вариантов, в зависимости от структуры вещей.Вы также можете сделать fadeOut с задержкой, которая была отменена, если они зависли над кнопкой, чтобы было время, чтобы навести мышь на кнопки, прежде чем они исчезли.Или вы можете использовать .hover() для контейнера, который содержит и изображение, и кнопки.

Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/Zk6rY/.

Сокращенный код (как видно из приведенного выше jsFiddle) еще больше к этому: 

$(document).ready(function() {
    $('#imageContainer').hover(function() {
        $('.ps_button').stop(true, true).fadeIn(400);
    }, function () {
        $('.ps_button').stop(true, true).fadeOut(400);
    });
});
1 голос
/ 21 августа 2011 
$(document).ready(function() {
    var $buttons = $('.next, .prev')
    $('#image-slider').mouseenter(function(){
        $buttons.stop().fadeTo('50','1');
        $buttons.mouseenter(function() { $buttons.show(); });
    }).mouseout(function(){
        $buttons.stop().fadeTo('50','0');
    });
});

Я также использовал stop();. Я также сократил его, чтобы использовать один селектор для выбора обеих кнопок (в данном случае это была переменная $buttons).

Я заметил, что если ваша мышь вошла в изображение div, а затем ушла, а затем снова вошла, кнопки стали прозрачнее на 50% из-за stop();. Я исправил это с помощью функции fadeTo();: первая - это длительность, которая была установлена ​​равной 50, как ваша, а вторая - непрозрачность, до исчезновения (число от 0 до 1).

Я также решил проблему с удержанием кнопок там, когда вы наводите на них курсор. Смотрите эту строку: 

$buttons.mouseenter(function() { $buttons.show(); });

Это просто использует show();, что дает элемент display:block; при наведении мыши.

Пример здесь: http://jsfiddle.net/purmou/MM4ba/1/
Подробнее о stop(); здесь: http://api.jquery.com/stop
Подробнее о fadeTo(); здесь: http://api.jquery.com/fadeto

РЕДАКТИРОВАТЬ: Обновлен код, чтобы он теперь использовал функцию jQuery hover();. Чем короче код, тем лучше. 

$(document).ready(function() {
    var $buttons = $('.next, .prev')
    $('#image-slider').hover(function(){
        $buttons.stop().fadeTo('50','1');
        $buttons.mouseenter(function() { $buttons.show(); });
    },
    function(){
        $buttons.stop().fadeTo('50','0');
    });
});

Пример: http://jsfiddle.net/purmou/MM4ba/2/
Подробнее о hover(); здесь: http://api.jquery.com/hover

0 голосов
/ 07 апреля 2015

Вы все, возможно, ищете этот ужас .....

$(document).ready(function () { $('#content').hover(function () { $('.a').stop(true).fadeTo(500, 0.7); $('.i').stop(true).fadeTo(500, 0.9); }, function () { $('.a').stop(true).fadeOut(500); $('.i').stop(true).fadeTo(500, 1); }); $('.a').hover(function () { $('.i').stop(true).fadeTo(500, 0.95); }, function () { $('.a').stop(true).fadeTo(500, 0.7); $('.i').stop(true).fadeTo(500, 0.9); }); });

http://jsfiddle.net/Sourav242/p0z0oh82/

0 голосов
/ 21 августа 2011

DEMO FIDDLE 

var b = $('.btn');

$('#image-slider').bind('mouseenter mouseleave', function(e) {    
   var check = ( e.type === 'mouseenter' ) ?
      ( b.stop(false, true).fadeIn(300)  ) :
      ( b.stop(false, true).fadeOut(300) ) ;
});

(с вашей разметкой и использованием троичных операторов)

...