Question

I am trying to slide a DIV from right to left over another DIV. It works for the initial slide over, but it’s the slide back that isn’t working. It slides back right to left again to disappear, then I try to click the button again but it won’t work after first open and close.

My code to follow:

function changeFeat () {
    if(jQuery('#featartinside').css('display') == 'none') {
        jQuery('#featartinside').animate({
            width: 730,
            marginLeft: 1,
            marginRight: -730,
            display: 'toggle'
        }, 'slow');
    } else {
        jQuery('#featartinside').animate({
            width: -730,
            marginLeft: 1,
            marginRight: 730,
            display: 'toggle'
        }, 'slow');
    }
}

#featartban {
    position: relative;
    background: url(../images/featart.png) top left no-repeat;
    width: 54px;
    height: 279px;
    cursor: pointer;
    float: left;
    left: 730px;
    margin-bottom: -279px;
}

#featartinside {
    height: 279px;
    width: 0;
    margin-left: 730px;
    background: #D13630;
    float: left;
    margin-bottom: -279px;
}

Like I said it works fine for opening, it’s the closing that isn’t working since it continues right to left instead of closing left to right. Then I can’t get a second open and close.

EDIT HTML:

<div id="featartban" onclick="changeFeat(); return false;"></div>
<div id="featartinside" style="display: none;"></div>

Answer 1

Sticking to jQuery.

<div id="featartban"></div>
<div id="featartinside" style="display: none;"></div>​

var $featartban = $("#featartban");
var $featartinside = $("#featartinside");
$featartban.toggle(function show() {
  $featartinside.animate({
    width: 730,
    marginLeft: 1,
    marginRight: -730,
    display: 'toggle'
  }, 'slow');
}, function hide() {
  $featartinside.animate({
    width: 0,
    marginLeft: 730,
    marginRight: 0,
    display: 'toggle'
  }, 'slow');
});​

.toggle() (not confuse with .toggle()) is awesome.

See it live here.