Question

我有li元素并排。当我向下滚动到底部时，会出现一个li元素，当我向上滚动时，它会消失。我用jade使用fadeIn和fadeOut实现了这一点。但是，我试图使用滑动效果而不是淡化效果来实现这一点。

以下是代码：

$(document).scroll(function() {
   var y = $(this).scrollTop();
   if (y > 180) {
     $('.header-avail')
     .attr('style', 'display: block !important;')
     .fadeIn();
   } 
   else {
     $('.header-avail').fadeOut();
   }   
});

HTML：

<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">

 <li id="menu-item-386" class="header-avail menu-item menu-item-type-post_type menu-item-object-page menu-item-386">
  <a href="#" class="menu-image-title-after"><span class="menu-image-title">Contact Us</span></a>
 </li>

 <li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;">
  <a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a>
 </li>
</ul>

Fiddle:

Answer 1

不要隐藏有关的li，而是给它一个零宽度，并为其设置动画。要使其工作，您还需要将边距设置为零（以便其他可见的li粘贴到窗口的右侧），并为动画li设置overflow: hidden属性：

＆＃13;

$(document).scroll(function () {
  var show = $(this).scrollTop() > 180,
      visible = $('.header-avail').width() > 0;
  if (show === visible) return; // nothing to do
  $('.header-avail').stop().animate({marginLeft: 20 * show, width: 100 * show});
});

＆＃13;

body {height: 2000px;}

#primary-menu {
    letter-spacing: 1px;
    list-style: none;
    margin: 0; /* all margins 0 */
    padding: 0;
    padding-top: 250px;
}
#primary-menu > li {
    display: inline-block;
    margin: 0; 
    position: relative;
    background: red;
    height: 300px;
    float: right;
}
/* show, but with zero width and margin */
.header-avail{width: 0; margin: 0; overflow: hidden}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
   <li id="menu-item-386" class="header-avail menu-item menu-item-type-post_type menu-item-object-page menu-item-386"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Contact Us</span></a></li>
   <li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a></li>
</ul>

＆＃13;

使用jQuery在滚动时从右向左滑动元素

1 个答案: