Question

I have a div that animates on and off from the right. So it slides off and completely disappears, and then slides back on.

What I don’t want though, is that when it animates off, I don’t want it to completely disappear, I want an offset of the div by 10px.

Anyway of achieving that?

This is the JS:

function hideEditorPane(){
    //weaponEditor
    $("#weaponEditor").animate({
        //left: '+=150'
        width: 'toggle'
        }, 500, function(){
    });
}

Here is the CSS:

#weaponEditor{
    position:absolute;
    background-image: url(images/editorPane.png);
    background-repeat: no-repeat;
    width:200px;
    height:342px;
    right:4px;
    top:4px;
}

And in the HTML, its just this:

<div id="weaponEditor"><a href="javascript: hideEditorPane();">click</a></div>

Thanks

Answer 1

One posibility: add overflow: hidden to the CSS rules for #weaponEditor, then:

function hideEditorPane(){
    //weaponEditor
    var we = $("#weaponEditor"),
        newWidth = (we.width() < 20) ? 200 : 10;
    we.animate({
            width: newWidth
        }, 500, function(){ });
}

That will toggle the width between 10 and 200 pixels.

Update: As Intersteller_Coder correctly points out, hardcoding the width in the script is terrible. You want those to stay in the CSS, if at all possible. If toggling the width ends up working for you, consider using the jQuery UI method toggleClass. Set up one class for the collapsed width and another class for the expanded width, then use toggleClass to switch between the two.