Question

我想在点击时隐藏/显示div。当我希望它隐藏时，我希望div能够隐藏起来。我有这个。但是这个div躲起来了。 FIDDLE

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

演示Fiddle

Answer 2

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

$(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，在这种情况下你可以使用toggle一个jQuery UI缓动，而不是使用否定左边的grazy，但只使用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 }

使用jQuery在左侧隐藏/显示

4 个答案: