Animate change of mainContent margin-right

[PoLiZe]

Hi people of XF..


I have a question, i'm trying to make a button for "hide" the sidebar.. the sidebar are hidden but the margin-right of the mainContent class is "260px".. i can change that with javascript but i need a animation for that..

with jQuery animate i try but i can do it because first i'm noob in js and i can change the margin-right because are in a "class"..

How i can makeit?



I have that:

<script>
  $(document).ready(function() {

$(ocultar).click(function () {
      $(sidebar).hide("slide", { direction: "right" }, 1000);
});
 });
</script>
<script>
$("#ocultar").click(function(){
  $("#mainContent").animate({
    margin-Right: "0"
  }, 1500 );
});
</script>

"ocultar" is a div with the button.

the sidebar slide for hide with animation but the mainContent margin-Right no

 

[Jeremy P]

Try marginRight instead of margin-Right

 

[PoLiZe]

I try marginRight first but nothing.

 

[PoLiZe]

I now delete the class on sidebar.css and on pagecontainer add
<style>
#mainContent {
margin-right: 260px;
}
</style>

and i added id on div..

and my javascript code is that:

<script>
$(document).ready(function() {

$(ocultar).click(function () {
$("#mainContent").animate({ "margin-rigth": "0px"}, 800);
});
});
</script>

but nothing :S

 

[PoLiZe]

any reply?