auto slide out with checkbox in jquery

I'm a rookie in jquery and want to learn for myself. I have red box using with checkbox inside of the red box.

what I like to have is that when load the page while uncheck, is automatic red box slide out if the user wants to slide in all have to do is mouse over on red box slide in.

I also have a checkbox for turn off automatic slide out, another word means stay view with out slide out.

I have written code but is not working, I guess it must merge two jquerys for ( slideout and checkbox)... I need help to have both auto slideout or slide in with checkbox that if checkbox checked then turn off auto slideout or slide in.

see jsfiddle

see the code ...

<!--auto hide and show right sidebar-->   

$(window).on("load", function() {
   $(".sidebar-nav-right").animate({ "right": "-=150px" }, "slow" );
});

$(window).on("load", function() {
   $(".sidebar-nav-right").animate({ "right": "-=150px" }, "fast" );
});


$(".sidebar-nav-right").hover(function () {
    $(".sidebar-nav-right").animate({ "right": "0px" }, "fast" );
}, function(){
     $(".sidebar-nav-right").animate({ "right": "-=150px" }, "fast" );
});


<!--checkbox -->

$('#mycheckbox').change(function(){
  if($(this).prop("checked")) {
    $(".sidebar-nav-right").addClass("sidebar-nav-rightb");
    $(".ui-sortable").css("width", "1320px");
  } else {
    $(".sidebar-nav-right").removeClass("sidebar-nav-rightb");
     $(".ui-sortable").css("width", "100%");
  }
});

<div class="sidebar-nav-right">

<div><input type="checkbox" id"mycheckbox">checkbox</div>

right sidebar

</div>