Окончание события JQuery Bubbling

Question

Это действительно просто ... Но по какой-то причине я не могу заставить его работать. JQuery ниже просто анимирует фон для выбора на панели sideNav через клик. Однако, если мне нужно щелкнуть по нескольким пунктам в пределах половины/второго диапазона, более одного из элементов будут иметь анимацию. (таким образом, сразу несколько элементов выбраны.)

Event.stopPropogation(); Предполагается отменить событие анимации, не так ли? Если нет, как я могу это исправить? Благодаря!

$('.sidebar nav ul li').not('.user').click(function(event){ 
    event.stopPropagation(); 

    $('.sidebar nav ul li').css('background-size', '15px'); 
    $('.sidebar nav ul li').removeClass('active'); 

    $(this).animate({ 
'background-size': '100%' 
    }, 500); 

    setInterval(function(){ 
$(this).addClass('active'); 
    return true; 
    },501); 
}); 

Answer 1

stopPropagation делает именно то, что это звучит как, он останавливает события от распространяющейся до родительских элементов выше в DOM.
Это не останавливает анимацию, которая была бы stop();

$('.sidebar nav ul li').not('.user').click(function(){ 

    $('.sidebar nav ul li').stop(true, true) 
          .css('background-size', '15px') 
          .removeClass('active'); 

    $(this).animate({ 
     'background-size': '100%' 
    }, 500, function() { 
     $(this).addClass('active'); 
    }); 
}); 

Answer 2

Если это анимация, вы должны предпочесть event.stop() в event.stopPropagation(). Надеюсь, это поможет.