使用最新的jquery制作类似“facebook mobile menu”的菜单

Question

我在创建移动菜单时发现这个有用的jquery就像facebook一样，我发现这个方法签名在jQuery 1.8中已被弃用并在jQuery 1.9中被删除。 jQuery，有没有办法使用最新的jquery来实现这样的效果。

$('#button').toggle( 
    function() {
        $('#right').animate({ left: 100 }, 'slow', function() {
            $('#button').html('Close');
        });
    }, 
    function() {
        $('#right').animate({ left: 0 }, 'slow', function() {
            $('#button').html('Menu');
        });
    }
);

DEMO

Answer 1

您可以这样使用：

var flag = 0;
var leftValue;
$('#button').on('click',function(){
      flag = !flag;
      leftValue = flag ? 100 : 0;
        $('#right').animate({ left: leftValue }, 'slow', function() {
            $('#button').text(function(i,v){
           return v == 'Close' ? 'Menu' : 'Close';
         });
        });
    });

Demo

Answer 2

试试这个DEMO：

var flag=1;
$('#button').click(
    function() { 
        if(flag){
            $('#right').animate({ left: 100 }, 'slow', function() {
                $('#button').html('Close');
            });
            flag=0;
        }
        else
        {
            $('#right').animate({ left: 0 }, 'slow', function() {
                $('#button').html('Menu');
            });
            flag=1;
        }
    }
);

更新的代码：

var flag=100;
$('#button').click(
    function() { 
            $('#right').animate({ left: flag }, 'slow', function() {
                $('#button').html(flag?'Close':'Menu');
            });
            flag=flag ? 0 : 100;
    }
);

Updated DEMO

Answer 3

如果你正在使用Bootstrap，这将解决你的问题。

http://jasny.github.io/bootstrap/examples/navmenu-reveal/