CODEWITHSUNDEEP
jquerycssjquery-animate
jfreak53
jfreak53

Reputation: 2349

Slide toggle DIV from right to left

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>

Upvotes: 0

Views: 9750

Answers (2)

Saravanan Kasi
Saravanan Kasi

Reputation: 696

You can try this

JS:

/*creating click event*/
$(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});

Demo : http://www.themeswild.com/read/slide-navigation-left-to-right

Upvotes: 0

Alexander
Alexander

Reputation: 23537

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.

Upvotes: 2

Related Questions