Установка состояний on () и off () с помощью наведения на кнопки с помощью jQuery 1.7 - PullRequest
Новая
       23

Установка состояний on () и off () с помощью наведения на кнопки с помощью jQuery 1.7

0 голосов
/ 31 января 2012

В настоящее время мои состояния при наведении курсора отключаются с помощью метода "off ()". Кажется, я не могу включить режим наведения с помощью кнопки «on ()» для кнопок, которые не являются моей активной ссылкой. Любая помощь будет принята с благодарностью! 

$(".datesmenu li").hover(function () {
        $(this).stop(true, true).animate({
            color: "#88bfdc",
            duration: 200,
            easing: "easeOutExpo",
            complete: function () {}
        });
    }, function () {
        $(this).stop(true, true).animate({
            color: "#fff",
            duration: 200,
            easing: "easeOutExpo",
            complete: function () {}
        });
    });

        $(".datesmenu li").click(function(){

                var index = $(this).prevAll().length;

                for (var i = 0; i <= index; i++) {
                   if (i==index){
                        $('#d' + index).stop(true, true).delay(500).fadeIn("fast"), function () {}
                        $(this).off('hover');
                        $(this).css('color', '#88bfdc');
                        //$(this).removeAttr('href');
                    }
                    else{
                        $(".datesmenu li").not(this).css('color', '#fff');
                        $(".datesmenu li").not(this).on('hover', function(event) {event.preventDefault();});                            
                        $('#d' + i).fadeOut("fast");
                        }
                }
    });

Idrumgood- Я не смог заставить ваше решение работать .. Мне пришлось использовать ubind .. Однако, когда я использую этот метод, я теряю замедление для моей анимации на моих ролловерах. Цвет меняется, но анимация По какой-то причине меня удаляют ?? .. Дайте мне знать, если у вас есть лучшее и более чистое решение, так как это был единственный способ заставить его работать ... 

function init(){

  $(".datesmenu li").mouseenter(hoverOn);
  $(".datesmenu li").mouseleave(hoverOut);
}


$(".datesmenu li").click(function () {

var index = $(this).prevAll().length;

for (var i = 0; i <= 6; i++) {
    if (i == index) {
        $('#d' + index).stop(true, true).delay(500).fadeIn("fast"), function () {}
        $(this).css('color', '#88bfdc');
        $(this).unbind('mouseenter').unbind('mouseleave');
    } else {
        $('#d' + i).hide();
        $(".datesmenu li").not(this).mouseenter(hoverOn);
        $(".datesmenu li").not(this).mouseleave(hoverOut);
        $(".datesmenu li").not(this).css('color', '#fff');

     }
   }
 });

function hoverOn(e) {
$(e.target).stop(true, true).animate({
    color: "#88bfdc",
    duration: 200,
    easing: "easeOutExpo",
    complete: function () {}
 });
}

  function hoverOut(e) {
  $(e.target).stop(true, true).animate({
    color: "#fff",
    duration: 200,
    easing: "easeOutExpo",
    complete: function () {}
  });
  }

  init();

1 Ответ

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

Когда вы устанавливаете событие при наведении на $(".datesmenu li").not(this).on('hover', function(event) {event.preventDefault();});, вы не говорите ему делать что-либо. Он не просто вернет ранее объявленное событие hover.

Возьмите события наведения, поместите их в функции, затем прикрепите их как таковые. 

function hoverOn(e){
        $(e.target).stop(true, true).animate({
            color: "#88bfdc",
            duration: 200,
            easing: "easeOutExpo",
            complete: function () {}
        });
}

function hoverOut(e){
        $(e.target).stop(true, true).animate({
            color: "#fff",
            duration: 200,
            easing: "easeOutExpo",
            complete: function () {}
        });
}

Затем, когда вы захотите снова связать его: 

$(".datesmenu li").not(this).on('hover', function(event) {hoverOn(event)}, function(event){hoverOut(event)});
...