jQuery左侧幻灯片+昏暗背景

jQuery slide from left + dim background

本文关键字：背景 幻灯片 jQuery      更新时间：2023-12-08

我试图调暗背景，同时向右滑动打开左侧菜单。

这是链接和jsfiddle。

在第一次运行时，当调光器代码被注释掉时，它会隐藏向左滑动，第二次单击后，它的工作正常。当包含调光器代码时，它不会删除class='dimmer'，我也无法再次单击。

这是jQuery:

jQuery(document).ready( function(){
jQuery(".x-btn-navbar").click(function(){
    //if (jQuery('#dimmer').hasClass('dimmer')){
        //jQuery('#dimmer').removeClass('dimmer');
    //} else {
        //jQuery('#dimmer').addClass('dimmer');
    //}
    jQuery('.nav-animate').fadeIn(500);
    jQuery('.nav-animate nav').toggle('slide', {direction:'left'}, 500);
});
});

感谢您的帮助，谢谢您抽出时间。

完成了，我想。。。

HTML中的更改

<div class="x-navbar-wrap" style="z-index:999;">
    <div class="x-navbar x-navbar-fixed-left">
      <div class="x-navbar-inner">
        <div class="x-container max width">
<a data-target=".x-nav-wrap.mobile" class="x-btn-navbar" href="#">
  <span style="margin:-17px;font-size:20px;">MENU</span>
</a>
<!------- You didn't had these closing tags ---->
          </div>
        </div>
    </div>

CSS更改

#dimmer {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

JavaScript

jQuery(document).ready( function(){
    jQuery('.nav-animate nav').hide('slide', {direction:'left'}, 500);
    jQuery(".x-btn-navbar").click(function(){
        jQuery('#dimmer').fadeIn(250, function(){
        jQuery('#dimmer').fadeOut(250);
        })
        jQuery('.nav-animate').fadeIn(500);
        jQuery('.nav-animate nav').toggle('slide', {direction:'left'}, 500);
    });
});

工作Fiddle

也许这会对您有所帮助：

jQuery('.nav-animate nav').css({
    opacity: 0,
    left: -$('.nav-animate nav').outerWidth()
});
jQuery(".x-btn-navbar").click(function () {
    if (jQuery('#dimmer').hasClass('dimmer')) {
        jQuery('#dimmer').removeClass('dimmer');
        jQuery('.nav-animate nav').animate({
            opacity: 0,
            left: -$('.nav-animate nav').outerWidth()
        }, 500);
    } else {
        jQuery('#dimmer').addClass('dimmer');
        jQuery('.nav-animate nav').animate({
            opacity: 1,
            left: $('.x-btn-navbar').outerWidth()
        }, 500);
    }
});

JSFiddle演示：http://jsfiddle.net/kq5vo508/2/

我希望我答对了你的问题，但从你所附的链接来看，你第一次点击菜单按钮时似乎有问题，后来会混淆调光器的状态。

在您的HTML中，您有导航部分

<section class="nav-animate">
    <nav style="height:auto;" class="x-nav-wrap mobile cbp-spmenu cbp-spmenu-vertical cbp-spmenu-push">

如果您的css将.nav-animate设置为不显示，请尝试删除该设置，而是将内部nav标记设置为display:none;

相关文章：