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

Question

我有一些并排的li元素。当我滚动到底部时，其中一个li元素会出现，然后向上滚动时消失。我使用jQuery的fadeIn和fadeOut实现了这一点。但是，我想使用滑动效果而不是淡入淡出效果来实现这一点。

以下是代码： ```html 暂无 ```

$(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:

- user38208

---

你想要滑动效果吗？ - Maulik

是的，滑动效果。 - user38208

你想要这样的吗 更新后的Fiddle - Maulik

@MaulikBhatt 不，我希望它从右向左滑动。 - user38208

然后只需动画化CSS的'margin-left'属性，您将获得所需的效果。 - Maulik

我该如何实现这个？ - user38208

Answer 1

不要隐藏相关的

，而是将其宽度设为零，并对其进行动画处理。为了实现这一点，您还需要将边距设置为零（使其他可见的

粘在窗口的右侧），并给正在进行动画处理的

添加“overflow: hidden”属性：

$(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});
});

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}

<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>

- trincot