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

您的动态库似乎会将li display:inline更改为display: list-item，就像默认情况下一样。尝试添加以下代码：

li {
    display: inline !important;
}

即使库更改元素内联样式，它也应该使列表项保持内联。

blast.js改变了li元素的位置

1 个答案: