使用jQuery在滚动时从右向左滑动元素
问题描述:
我有并列的li元素。当我向下滚动到底部时会出现一个li元素,当我向后滚动时会消失。我用jQuery使用fadeIn和fadeOut实现了这一点。不过,我正在尝试使用滑动效果而不是淡化效果来实现这一点。使用jQuery在滚动时从右向左滑动元素
下面是代码:
$(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>
答
而是躲在有关li
的,给它一个零宽度和动画效果。对于工作,你还需要设置保证金为零(让对方看到li
粘在窗口的右侧),并给动画li
的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>
你想滑动效果....? –
是滑动效果 – user38208
你想要这样[更新的小提琴](https://jsfiddle.net/1a01xtxL/2/) –