jquery - 使用 jQuery 在左侧隐藏/显示

Question

我想在点击时隐藏/显示一个 div。当我希望它隐藏时，我希望 div 向左隐藏。我有这个。但是 div 向上隐藏。小提琴

$(document).ready( function() {
    $('#showmenu').click( function() {
       var hidden = $('.sidebarmenu').data('hidden');
       $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
       if ( hidden ) {
           $('.sidebarmenu').css({
               position: 'absolute',
               left: -200000
           });
       } else {
           $('.sidebarmenu').css({
               position: '',
               left: 0
           });
       }
       $('.sidebarmenu,.image').data("hidden", !hidden);
    });
}); 

这是我的 HTML

 <button id="showmenu" type="button">Show menu</button>
 <div class="sidebarmenu" style="position: absolute; left: -200000px">
     This should go left
 </div>

Answer 1

用于animate()显示它向左移动

编辑：

如果您想最初显示 div：

html:

<button id="showmenu" type="button">Hide menu</button>
<div class="sidebarmenu">
     This should go left
</div>

JS：

if(hidden){
        $('.sidebarmenu').animate({
            left: '0px'
        },500)
    } else {
        $('.sidebarmenu').animate({
            left: '-200px'
        },500)

CSS：

.sidebarmenu{
    position:absolute;
    left: 0px
}
    }

演示小提琴

Answer 2

问题是，当您使用该css属性时，该操作将立即生效。如果你想看到它“动画”本身（并因此看到左移动），你应该使用animate具有相同 CSS 属性集的函数。

$(document).ready(function() {
    $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').data('hidden');
        $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
        if(hidden){
            $('.sidebarmenu').animate({
                position: 'absolute',
                left: -500
            }, 500);
        } else {
            $('.sidebarmenu').animate({
                position: 'relative',
                left: 0
            }, 500);
        }
        $('.sidebarmenu,.image').data("hidden", !hidden);

    });
});

Answer 3

在小提琴中，您已经包含了 jQuery UI，在这种情况下，您可以使用togglejQuery UI 缓动，而不会使用负左而变得模糊，但只能使用 display block-none。

使用显示状态而不是属性更新hidden。

代码：

$(document).ready(function() {
    $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').is(':visible');
        $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');

        $(".sidebarmenu").toggle("slide", {direction:'left'});

    });
});

演示：http: //jsfiddle.net/W5Wmw/1/

Answer 4

var status = 0;
$("#mobileMenuButton").click (function (){
    if (status == 0){
        $('#element').css ({'left': 0, 'transition' : '0.3s'})
        status = 1
    } else if (status == 1){ 
        $('#element').css ({'left': '-355px', 'transition' : '0.3s'})
        status = 0
    }

CSS：#element{ left: -355px }