Javascript jQuery幻灯片从左开始+；暗淡的背景

我试图在幻灯片向右打开左菜单时使背景变暗

这是和

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

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

});
});

---

非常感谢您的帮助，谢谢您的时间。

也许这会对您有所帮助：

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

---

jsiddle演示：

也许这会帮助您：

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

jsiddle演示：

完成，我想

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>

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

    });
});

工作

完成，我想

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>

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

    });
});

---

工作

我希望我正确回答了您的问题，但是从您附加的链接来看，您第一次单击菜单按钮似乎有问题，随后会混淆调光器的状态

在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

设置为不显示，请尝试删除该设置，并将内部导航标记设置为

显示：无
我希望我正确地回答了您的问题，但是从您附加的链接来看，您第一次单击菜单按钮似乎有问题，之后会混淆调光器的状态

在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
设置为不显示，请尝试删除该设置，并将内部导航标记设置为
显示：无
您想在菜单可见或隐藏时变暗吗？FWIW，
。toggleClass（'dimmer'）
可以替换整个
if（）
语句。@void在单击后，在菜单完全打开之前，我没有得到EHB。请再解释一下模式。谢谢乔治，哦，对不起@void我基本上想在菜单打开时调暗背景。在菜单打开的第二秒，它必须变暗。要在菜单可见或隐藏时变暗吗？FWIW，
。toggleClass（'dimmer'）
可以替换整个
if（）
语句。@void在单击后，在菜单完全打开之前，我没有告诉您EHB。请再解释一下模式。谢谢乔治，哦，对不起@void我基本上想在菜单打开时调暗背景。在菜单打开的第二秒，它必须已经变暗。你不能调用toggleClass（）而不是addClass（）和removeClass（）吗？除此之外，我喜欢你的回答。谢谢！你只是改变了剧本吗？因为当我尝试脚本时失败了。@E.H.B你记得把代码放在document.ready函数中吗？@E.H.B我更改了一些css。用户void的答案比addClass（）和removeClass（）更容易解释，难道你不能调用toggleClass（）吗？除此之外，我喜欢你的回答。谢谢！你只是改变了剧本吗？因为当我尝试脚本时失败了。@E.H.B你记得把代码放在document.ready函数中吗？@E.H.B我更改了一些css。用户void的答案更好解释嘿，非常感谢！但我需要保持调光器，直到用户再次单击关闭菜单。对不起，我说不清楚。我现在正试图用你的代码实现它。这就是你想要的吗？酷。只要记住在HTML和CSS中也要做适当的修改。也请给出<代码> Z索引：-1 < /代码>到 >不知道
.fadeToggle
。起初我想用动画。但似乎这是更简单的与fadeToggle，fadeIn，切换等嘿，谢谢！但我需要保持调光器，直到用户再次单击关闭菜单。对不起，我说不清楚。我现在正试图用你的代码实现它。这就是你想要的吗？酷。只要记住在HTML和CSS中也要做适当的修改。也请给出<代码> Z索引：-1 < /代码>到 >不知道
.fadeToggle
。起初我想用动画。但使用fadeToggle、fadeIn、toggle等似乎更简单。