CODEWITHSUNDEEP
javascriptjqueryslide
Greg
Greg

Reputation: 567

How To Slide a Div in and Out after Initial Silde Out Animation?

I'm not the greatest with java. I have a few jQuery animations that excecute when the page loads. The last (so far) being a hidden div that slides out. There is another div nested within it for the purpose of clicking to close and then partially hide the div. I would like at this point be able to click on that same div that closed it to open or close as I wish. You can see what I have so far here. http://www.gregtaylordesignstudio.com/Great-Lakes-Project/actions.html

the jquery I 'm using is 

$(document).ready(function(){
                var slideout = $('#actionsBlurb');
                $('#dots').hide();
                $('#mapBack').delay(1000).animate({top:"45px"},800).fadeOut(400);
                $('#mapBackTop').delay(1000).fadeOut(1000);
                slideout.delay(4000).animate({ right: 75, }, { duration: 1000, easing: 'easeOutExpo'});                                                  

                $(".close").click(function () {
        slideout.animate({ right: '75px'}, { queue: false, duration: 500}); }, function () {       
        slideout.animate({ right: '-475px'}, { queue: false, duration: 500 });
    });
        });

my css

#actionsBlurb {
    width:50%;
    padding:20px;
    position:absolute;
    top:0;
    right:-525px;
    background: rgb(255, 255, 255) transparent;
    background: rgba(255, 255, 255, 0.8);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907);    
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)";
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 6px; /* future proofing */
    -khtml-border-radius: 10px; /* for old Konqueror browsers */
    border:#036 solid 4px;
    z-index:200;
}
.close{
    width:40px;
    height:40px;
    background-image: url(../images/close.png);
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
    bottom: -40px;
    left: -20px;
    z-index:300;
}

#topSection {
    width:900px;
    height:749px;
    position:relative;
    margin: 0 auto;
    overflow:hidden;
    }

Upvotes: 0

Views: 174

Answers (1)

Jordan James Holt
Jordan James Holt

Reputation: 91

Give something like this a shot....

var open = true;
$(".close").click(function () {
    if(open === false) {
        open = true;
        slideout.animate({ right: '-475px'}, { queue: false, duration: 500 });
    } else if(open === true) {
        open = false;
        slideout.animate({ right: '75px'}, { queue: false, duration: 500});
    }
});

The 'open' variable will give us a means to know whether or not our slide out is hidden or not. Thus giving the click event a means to know how it should animate the slide out. It's set initially to true sense the slide out starts out visible to the user. I wasn't sure which of your animates was sliding out vs sliding in, so you may need to switch them around based on the existing logic. But I hope this gives you some idea of what to aim for and try out.

Upvotes: 1

Related Questions