Остановка и откат других объектов анимации jQuery, когда мышь добавлена ​​новая

Question

Я работаю над ползунком jQuery с активным классом .slider-active, когда mouseEnter фигура.

Таким образом, я хочу, чтобы оживить мой .slider-imgcontainer и мой figcaption в прохладном EFFET:

Когда .slideractive изменения, предыдущий объект должен уменьшить ширину .slider-imgcontainer в 250px и после width и padding из figcaption - 0. Когда я уменьшаю widthfigcaption, текст был слишком высоким, поэтому я просто использую .hide и .show, чтобы исправить это.

Затем слайдер начнет работать, но ... когда мышь перевернется на несколько фигур, все они анимированы. Я попытался исправить это, но я не могу найти никаких решений (с .clearQueue() et .stop()).

Результат: current slider

Основной код анимации:

$(document).ready(function(){ 


    var GLOBAL = { 
     window:$(window), 
     slider:$('.slider-work'), 
     container:$('#container'), 
     figure:$("figure") 
    } 

    /********* SLIDER MAIN *************/ 
    // INIT LARGEUR --- 
    GLOBAL.slider.width($(".slider-work img").size() * 250 + 900); 

    // save width of figcaption in attr to animate them after (no auto animate) 
    GLOBAL.slider.find("figcaption").each(function(i) { 
     var t = $(this); 
     if(!t.parent().hasClass("slider-active")) 
      t.hide(); 

     t.attr("largeur", t.width()); 


    }); 


    // hover 
    GLOBAL.slider.children("figure").mouseenter(function() { 


     var oldActive = $(".slider-active"); 
     var thiss = $(this); 

     oldActive.removeClass("slider-active"); 
     thiss.addClass("slider-active"); 

     oldActive.find("figcaption").animate({ 
      width: 0, 
      padding: 0 
      }, 220, 'linear', function() { 
       oldActive.find(".slider-imgcontainer").animate({ 
        width : 250 
        }, 400, 'linear', function() { 

          // Animation de l'ancien active fini , alors : 

          //$(".slider-imgcontainer").removeAttr("style"); 


          thiss.removeAttr("style").children(".slider-imgcontainer").animate({ 
            width : 400 
           }, 400, 'linear', function(){ 
            var largeurFigcaption = thiss.find("figcaption").show().attr("largeur"); 

            thiss.find("figcaption").animate({ 
             width : largeurFigcaption, 
             padding : " 0 20px 20px 20px" 
             }, 220, 'linear', function(){ 


            }); 
          }); 


        }); 
     }); 
    }); 
    // END MouseEnter 


//End ready 
}); 

И мой код для отладки бегунок

GLOBAL.slider.children("figure").mouseout(function() { 
      var thiss = $(this); 
      //$("#title span").append(" toto"); 


      var myChildrenBehave = GLOBAL.slider.filter(function() { 
       var filtered = $(this).children().is(":animated"); 
       return filtered; 
      }); 

      myChildrenBehave.clearQueue().stop(); 



     }); 

Я принимаю все Idee :)

Answer 1

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

У jQuery нет встроенной проверки мыши по объекту, о котором я знаю, но я написал один из моих собственных для довольно простой ситуации.

var mouse = { 
mouseX: null, 
mouseY: null, 
mouseInWindow: true, 
init: function() { 
    $(document).bind('mousemove', function(event) { 
     mouse.mouseX = event.pageX; 
     mouse.mouseY = event.pageY; 
     mouse.mouseInWindow = true; 
    }); 
    $(document).bind("mouseleave", function(event) { 
     mouse.mouseInWindow = false; 
    }); 
    $(document).bind("mouseenter", function(event) { 
     mouse.mouseInWindow = true; 
    }); 
}, 
isOver: function($element) { 
    $elementPosition = $($element).offset(); 
    $elementWidth = $($element).width(); 
    $elementHeight = $($element).height(); 
    $returnValue = true; 
    if (mouse.mouseX !== null) { 
     if (mouse.mouseX < $elementPosition.left) { $returnValue = false; } 
     if (mouse.mouseY < $elementPosition.top) { $returnValue = false; } 
     if (mouse.mouseX > $elementPosition.left + $elementWidth) { $returnValue = false; } 
     if (mouse.mouseY > $elementPosition.top + $elementHeight) { $returnValue = false; } 
     if (!mouse.mouseInWindow) { $returnValue = false; } 
    } 
    return $returnValue; 
} 

}

Вам нужно будет запустить mouse.init() перед вашим другим кодом, но вы можете использовать mouse.isOver ($ (yourSlideActivator));