пропозиції роботи
Adam Koza Grafik, Utajnione
Temat: Problem z animacja
Witam, mam problem z animacją. Dodam że w jquery nie pisałem dożo, więc proszę o wyrozumiałość.Mam okno które wyświetla się na stronie po załadowaniu na środku, po kliknięciu zamknij okno zjeżdża do lewej strony i można je ponownie wyświetlić na środku po kliknięciu na button. Gdy ktoś wchodzi na stronę to zapisuje się cookie i następnym razem okno jest schowane od razu do lewej strony. Wszystko działa tylko gdy wejdę na stronę ponownie muszę dwa razy kliknąć na button żeby okno wyjechało na środek, potem działa już poprawnie. Proszę o rady i dziękuę
KOD JQUERY
/////////////////////////////////////////////////////////
jQuery(document).ready(function(){
var cookie_val = '-290px';
// set cookie
if(!jQuery.cookie("popup_box")){
jQuery.cookie('popup_box', '50%', { expires: 1, path: '/' });
cookie_val = jQuery.cookie('popup_box');
}
else {
if ( $.browser.msie ){ jQuery("#panel_box").css("left",cookie_val); }
else { jQuery("#panel_box").css("left","-20%"); }
jQuery(".slide_button").addClass("zamknij");
}
jQuery(".slide_button").toggle(function(){
if ( $.browser.msie ){ jQuery("#panel_box").animate({left: "-290px"}, 500 );}
else { jQuery("#panel_box").animate({left: "-20%"}, 500 ); }
jQuery(this).addClass("zamknij");
return false;
},
function(){
jQuery("#panel_box").animate({left: "50%"}, 500 );
jQuery(this).removeClass("zamknij");
return false;
});
});
//////////////////////////////////////////////////////////////////////////
HTML
///////////////////////////////////////////////////////////////////////////
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Wysuwany panel menu w jQuery</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/massage_box.js"></script>
<link rel="stylesheet" href="panel.css" type="text/css" />
</head>
<body>
<div id="panel_box">
<div id="content_box"></div>
<a href="#" class="slide_button" ></a>
</div>
</body>
</html>
//////////////////////////////////////////////////////////////////////
CSS
///////////////////////////////////////////////////////////////////
/*----------panel----------*/
#panel_box
{
background: #223344;
padding: 10px;
width: 600px;
height: 300px;
position: fixed;
left: 50%;
margin-left: -300px;
top: 50%;
margin-top: -150px;
background:rgba(0,0,0,.3);
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
z-index: 500;
}
#content_box {
width:600px;
height:300px;
background-image: url('img/massage_bg.jpg');
background-repeat: no-repeat;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.25);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,.25);
box-shadow:0px 1px 3px rgba(0,0,0,.25);
-webkit-border-radius:0px 0px 4px 4px;
-moz-border-radius:0px 0px 4px 4px;
border-radius:0px 0px 4px 4px;
}
/*---------przycisk panelu--------*/
.slide_button
{
background: url(img/button_box.png);
background-repeat: no-repeat;
display: block;
height: 300px;
text-indent: -9999px;
width: 32px;
background-position: 0px 0px;
position: absolute;
right: -10px;
top: -10px;
}
.zamknij
{
background-position: -32px 0px;
}
a:focus {
outline:none;
}
