Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá meus caros, estou com um problema com o animate, segue o link:
(http://escolasnewpoint.com.br/nova_newpoint/)
No meio do site, embaixo do botão Area do Aluno, existe uma tabela com 3 link simulando abas...
Então, ele sempre vem clicado a aba "Cursos", quando eu estou em "Cursos" e clico em "Eventos" ou "Feirados" ele executa a animação, mas quando eu estou em "Eventos" e vou para "Feriados" ele não executa a animação, ele simplesmente troca as informações, e depois, se eu voltar para "Cursos" ele executa a animação.
Segue o código:
$(function(){
var headers = $("#links_agenda tr th a");
$.each(headers, function(i, val) {
$(this).click(function(){
eval("efeitoCabecalho"+$(this).attr("id")+"()");
});
});
function efeitoCabecalholink_cursos(){
if($("#id_cursos").attr("class") != "agenda_inativo"){
$("#agenda_cursos").removeClass("escondido");
$("#agenda_cursos").animate({marginTop: "0px"},500,function(){
$("#agenda_eventos, #agenda_feriados").addClass("escondido");
});
$("#id_cursos").removeClass("agenda_ativo").addClass("agenda_inativo");
$("#id_eventos").removeClass("agenda_inativo").addClass("agenda_ativo");
$("#id_feriados").removeClass("agenda_inativo").addClass("agenda_ativo");
}
}
function efeitoCabecalholink_eventos(){
if($("#id_eventos").attr("class") != "agenda_inativo"){
$("#agenda_eventos").removeClass("escondido");
$("#agenda_cursos").animate({marginTop: "-113px"},500,function(){
$("#agenda_cursos, #agenda_feriados").addClass("escondido");
});
$("#id_eventos").removeClass("agenda_ativo").addClass("agenda_inativo");
$("#id_feriados").removeClass("agenda_inativo").addClass("agenda_ativo");
$("#id_cursos").removeClass("agenda_inativo").addClass("agenda_ativo");
}
}
function efeitoCabecalholink_feriados(){
if($("#id_feriados").attr("class") != "agenda_inativo"){
$("#agenda_feriados").removeClass("escondido");
$("#agenda_cursos").animate({marginTop: "-226px"},500,function(){
$("#agenda_cursos, #agenda_eventos").addClass("escondido");
});
$("#id_feriados").removeClass("agenda_ativo").addClass("agenda_inativo");
$("#id_eventos").removeClass("agenda_inativo").addClass("agenda_ativo");
$("#id_cursos").removeClass("agenda_inativo").addClass("agenda_ativo");
}
}
});
código da agenda:
<div id="aba_agenda">
<table id="links_agenda">
<thead>
<tr>
<th id="id_cursos" class="agenda_inativo"><a id="link_cursos" class="">Cursos</a></th>
<th id="id_eventos" class="agenda_ativo"><a id="link_eventos" class="">Eventos</a></th>
<th id="id_feriados" class="agenda_ativo"><a id="link_feriados" class="">Feriados</a></th>
</tr>
</thead>
</table>
</div>
<div id="agenda_cursos" class="">
<table id="tabela_cursos">
<thead>
<tr>
<th class="">O que:</th>
<th class="">Quando:</th>
<th class="">Onde:</th>
</tr>
</thead>
<tbody>
<tr>
<td>curso</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>curso</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>curso</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>curso</td>
<td>sexta</td>
<td>gti</td>
</tr>
</tbody>
</table>
</div>
<div id="agenda_eventos" class="">
<table id="tabela_eventos">
<thead>
<th class="">O que:</th>
<th class="">Quando:</th>
<th class="">Onde:</th>
</thead>
<tbody>
<tr>
<td>evento</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>evento</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>evento</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>evento</td>
<td>sexta</td>
<td>gti</td>
</tr>
</tbody>
</table>
</div>
<div id="agenda_feriados" class="">
<table id="tabela_feriados">
<thead>
<th class="">O que:</th>
<th class="">Quando:</th>
<th class="">Onde:</th>
</thead>
<tbody>
<tr>
<td>feriados</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>feriados</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>feriados</td>
<td>sexta</td>
<td>gti</td>
</tr>
<tr>
<td>feriados</td>
<td>sexta</td>
<td>gti</td>
</tr>
</tbody>
</table>
</div>
Editado:
CSS:
#agenda{float:left;width:363px;height:141px;margin:0 5px 0 10px;overflow:hidden;}
#agenda ul{list-style:none;}
#agenda li{display:inline;width:33.33%;}
#agenda .ag_show{display:block;}
#agenda .ag_hide{display:none;}
#agenda #agenda_cursos{border:1px solid;border-top:0;margin:0px 0px 0px 0px;}
#agenda #agenda_cursos th{width:120px;font-size:10px;font-weight:bold;}
#agenda #agenda_eventos{border:1px solid;border-top:0;margin:0px 0px 0px 0px;}
#agenda #agenda_eventos th{width:120px;font-size:10px;font-weight:bold;}
#agenda #agenda_feriados{border:1px solid;border-top:0;margin:0px 0px 0px 0px;}
#agenda #agenda_feriados th{width:120px;font-size:10px;font-weight:bold;}
#tabela_cursos tr:hover, #tabela_eventos tr:hover, #tabela_feriados tr:hover{color:#da251c;}
#tabela_cursos th tr:hover, #tabela_eventos th tr:hover, #tabela_feriados th tr:hover{color:#000!important;}
#links_agenda th{width:120px;font-weight:normal;border:1px solid;}
#links_agenda th.agenda_ativo{background:#d6d6d6;}
#links_agenda th.agenda_inativo{background:#fff;}
Carregando comentários...