blast.js изменение положения элементов li

Question

У меня есть h1 и nav с ul и li s. Когда мышь переместится на h1, анимации h1 и li исчезает. Однако список не там, где он должен быть после анимации. Первоначально список сосредоточен в заголовке с display:inline, но после анимации список застрял в левом верхнем углу и, похоже, имеет результат, похожий на display:block Почему это происходит?

JSbin

$('h1').one('mouseover', function() { 

$('h1').blast({ 
    delimiter: 'word', 
    generateValueClass: true 
}); 

    $('.blast-word-surviving') 
    .css({ 
    position: 'relative', 
    left: 0 
    }) 
    .animate({left: '-100vw' }, 1600); 
    setTimeout(function() { 
     $('.blast-word-surviving').css('visibility', 'hidden'); 
     $('nav').css('visibility', 'visible'); 
     $('li').velocity("fadeIn", { duration: 1500 }); 
    }, 2000); 

$('.blast-word-earth') 
.css({ 
    position: 'relative', 
    left: 0 
}) 
.animate({left: '100vw' }, 1600); 
setTimeout(function() { 
    $('.blast-word-earth').css('visibility', 'hidden'); 
    $('nav').css('visibility', 'visible'); 
    $('li').velocity("fadeIn", { duration: 1500 }); 
}, 2000); 


}); 

Answer 1

Похоже, ваша библиотека анимации изменяет свой lidisplay:inline к display: list-item, как это должно быть по умолчанию. Попробуйте добавить следующий код:

li { 
    display: inline !important; 
} 

Он должен содержать ваши элементы списка в строгом, даже если библиотека меняет элементы встроенных стилей.