jQuery | How can I modify this, using functions that aren't deprecated?

[brsy]

I have this jsFiddle that works perfectly for what I want to do, but it uses deprecated jQuery functions. Can someone lead me in the right direction? I tried using toggle(), but it still didn't work.

You must be registered for see links

 

[TesoMayn]

$(function() {
    $('.clickme').click( function() {
        var toggled = $(this).data('toggled')||1
        switch ( toggled ) {
            case 1:
                $("#slideout").animate({left:'0px'}, {queue: false, duration: 500});
                break;
            case 2:
                $("#slideout").animate({left:'-280px'}, {queue: false, duration: 500});
                break;
        }
        toggled++;
        if (toggled > 2) toggled = 1
        $(this).data('toggled',toggled);
    });
});

 

[RastaLulz]

Here's how I'd do it:

$(function () {
    $('.clickme').on('click', function() {
        $('#slideout').toggleClass('slideout-toggle');
    });
});

Then I'd add the following CSS class:

#slideout.slideout-toggle {
  left: 0px;
}

Then I'd utilize the (CSS3)

You must be registered for see links

on #slideout, by adding:

    transition: all 0.5s;
    -webkit-transition: all 0.5s;

You must be registered for see links