CODEWITHSUNDEEP
jqueryanimationoffset
Oliver Jones
Oliver Jones

Reputation: 1440

JQuery - Animate

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

Upvotes: 1

Views: 161

Answers (3)

dgvid
dgvid

Reputation: 26633

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.

Upvotes: 1

Mitch Ward
Mitch Ward

Reputation: 86

width:'toggle' is actually shrinking the div from its's original width to 0, not sliding it anywhere. If you want to keep using this method, then set a min-width:10px on the div and it will stop the jQuery from making it any smaller than that.

The code you have got commented out: left: +=150 is the type of code to use if want to slide it out by a set amount. It would be something like this to slide the div to the left by 500px:

function hideEditorPane(){
    //weaponEditor
    $("#weaponEditor").animate({
        left: '-=500'   //<-- however wide the div is, minus 10px.
        }, 500, function(){
    });
 }

So obviously, set the amount it slides to the width of the div you are sliding, minus the amount that you want to 'stick out'

Hope this helps.

Upvotes: 0

RandomWhiteTrash
RandomWhiteTrash

Reputation: 4014

Although it's hard to tell without more understanding of what you are trying to achieve I would say that you want to set width to say: 10px instead od using toggle.

Toggle will set width to 0.

So use

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

for example.

That is if I understood correctly that you don't want div to disappear completely you want to have 10px of that div left so you can do something with it later (like folding it to and unfolding at a click).

Upvotes: 0

Related Questions