Problemas Funções Jquery [RESOLVIDO]

Boa Noite Pessoal.

No arquivo submenu.js tenho as seguintes funções utilizando jquery:

$(function() {
		$( "#bt_news" ).toggle(
			function() {
				$( "#news" ).animate({
					backgroundColor: "#1C86EE",
					color: "#fff",
					height: 150
				}, 1000 );                           
			},
			function() {
                                $( "#news" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					height: 37 
				}, 1000 );
                         
                                
			}
		);
                $( "#bt_mais" ).toggle(
			function() {
				$( "#mais" ).animate({
					backgroundColor: "#1C86EE",
					color: "#fff",
					height: 150
				}, 1000 ),
                                
                                $("#webmail").css('visibility','visible');
			},
			function() {
				
                                 $( "#mais" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					height: 37 
				}, 1000 ),
                                 $( "#webmail" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					height: 0 
				}, 1000 ),
                                $("#webmail").css('visibility','hidden');
			}
		);
	$( ".column" ).sortable({
			connectWith: ".column"
		});

		$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "&lt;span class='ui-icon ui-icon-minusthick'&gt;&lt;/span&gt;")
				.end()
			.find( ".portlet-content" );

		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
		});

		$( ".column" ).disableSelection();
    
        });



$(document).ready(

    $( "#news" ).animate({
            backgroundColor: "#1C86EE",
            color: "#fff",
            height: 150
    }, 1000 ),

            $( "#mais" ).animate({
            backgroundColor: "#1C86EE",
            color: "#fff",
            height: 150
    }, 1000 ),
    $("#webmail").css('visibility','visible'));

Se os scripts forem declarados dentro da pagina eles funcionam normalmente:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;MobTudo - Solu&ccedil;&otilde;es&lt;/title&gt;
&lt;link href="styles/estilos.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="styles/posicionamento.css" rel="stylesheet" type="text/css"/&gt;
&lt;link href="styles/rodape_conteudo.css" rel="stylesheet" type="text/css"/&gt;
&lt;link href="jquery/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"/&gt;
&lt;link href="jquery/demos.css" rel="stylesheet"  type="text/css"/&gt;
&lt;script src="scripts/submenu.js"&gt;&lt;/script&gt; 
&lt;script src="jquery/jquery-1.6.2.js"&gt;&lt;/script&gt;
&lt;script src="jquery/ui/jquery.effects.core.js"&gt;&lt;/script&gt;
&lt;script src="jquery/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
&lt;script src="jquery/ui/jquery.ui.mouse.js"&gt;&lt;/script&gt;
&lt;script src="jquery/ui/jquery.ui.sortable.js"&gt;&lt;/script&gt;
&lt;style&gt;
  
.column { width: 170px; float: left; padding-bottom: 100px; margin-top: 3px; }
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 1pt; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; } 
		
		
&lt;/style&gt;
&lt;script&gt;
/*        function sub_menu()
        {
                                $( "#news" ).animate({
					backgroundColor: "#1C86EE",
					color: "#fff",
					height: 150
				}, 1000 ),
                                
                                	$( "#mais" ).animate({
					backgroundColor: "#1C86EE",
					color: "#fff",
					height: 150
				}, 1000 ),
                                $("#webmail").css('visibility','visible');  
        }
 	$(function() {
		$( "#bt_news" ).toggle(
			function() {
				$( "#news" ).animate({
					backgroundColor: "#1C86EE",
					color: "#fff",
					height: 150
				}, 1000 );                           
			},
			function() {
                                $( "#news" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					height: 37 
				}, 1000 );
                         
                                
			}
		);
                $( "#bt_mais" ).toggle(
			function() {
				$( "#mais" ).animate({
					backgroundColor: "#1C86EE",
					color: "#fff",
					height: 150
				}, 1000 ),
                                
                                $("#webmail").css('visibility','visible');
			},
			function() {
				
                                 $( "#mais" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					height: 37 
				}, 1000 ),
                                 $( "#webmail" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					height: 0 
				}, 1000 ),
                                $("#webmail").css('visibility','hidden');
			}
		);
	$( ".column" ).sortable({
			connectWith: ".column"
		});

		$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "&lt;span class='ui-icon ui-icon-minusthick'&gt;&lt;/span&gt;")
				.end()
			.find( ".portlet-content" );

		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
		});

		$( ".column" ).disableSelection();
    
        });
*/      
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;!--Redes Sociais--&gt;
    &lt;div&gt;
        &lt;?php
            include 'social.php';
        ?&gt;
    &lt;/div&gt;
    
    &lt;div id="corpo_pagina"&gt;
        &lt;!--Cabeçalho--&gt;
        &lt;?php
            include 'cabecalho_menu.php';
        ?&gt;    

        &lt;div id="sub_menu"&gt;
            &lt;!--Mais--&gt;
            &lt;div id="mais" class="ui-widget-content ui-corner-all" &gt;   
                <a  > &lt;h3 class="ui-widget-header ui-corner-all"&gt;Mais&lt;/h3&gt;</a>
                &lt;div id="webmail"&gt;
                    <a href="http://mobtudo.com:2095/3rdparty/roundcube/?_task=mail" > &lt;input type="image" src="images/body/webmail.png"/&gt;&lt;div style="font:bold 14px sans-serif; color: #FFD700; "&gt;Webmail&lt;/div&gt;</a>
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!--News--&gt;       
            &lt;div id="news" class="ui-widget-content ui-corner-all"&gt;   
                <a   > &lt;h3 class="ui-widget-header ui-corner-all"&gt;News&lt;/h3&gt;</a>
                    &lt;!--&lt;div id="column" class="column" style="visibility: hidden"&gt;
                        &lt;div class="portlet"&gt;
                            &lt;div class="portlet-header"&gt;Feeds&lt;/div&gt;
                            &lt;div class="portlet-content"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div &gt;
                    &lt;div id="column" class="column" style="visibility: hidden"&gt;
                        &lt;div class="portlet"&gt;
                            &lt;div class="portlet-header"&gt;Images&lt;/div&gt;
                            &lt;div class="portlet-content"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;  --&gt; 
            &lt;/div&gt;     
        &lt;/div&gt;

        &lt;!-- corpo --&gt;
        &lt;div id="conteudo"&gt;


        &lt;/div&gt;

        &lt;!--Rodape--&gt;
        &lt;?php
            include 'rodape.php';
        ?&gt;
        &nbsp;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Criei uma simples função e debuguei com o firebug normalmente(apenas para validar se eu estava acessando o arquivo) e entrou normalmente, as funções que estão
no arquivo submenu.js não funcionam. O que pode ser?

Olá, tudo bem?
Não sei se vou conseguir te ajudar mas vamos lá!!!

Tenta inverter a ordem do seu script, em vez de ser desse jeito,

<script src="scripts/submenu.js"></script>   
<script src="jquery/jquery-1.6.2.js"></script>  
<script src="jquery/ui/jquery.effects.core.js"></script>  
<script src="jquery/ui/jquery.ui.widget.js"></script>  
<script src="jquery/ui/jquery.ui.mouse.js"></script>  
<script src="jquery/ui/jquery.ui.sortable.js"></script>

tenta colocá-lo assim pra ver se funciona :

<script src="jquery/jquery-1.6.2.js"></script>  
<script src="jquery/ui/jquery.effects.core.js"></script>  
<script src="jquery/ui/jquery.ui.widget.js"></script>  
<script src="jquery/ui/jquery.ui.mouse.js"></script>  
<script src="jquery/ui/jquery.ui.sortable.js"></script>
<script src="scripts/submenu.js"></script>

Não conheço muito de Jquery, mas comigo aconteceu de dar erro em uma das aplicações que tínhamos feito e deu erro, e era a ordem dos scripts que estava errado.

Espero ter ajudado!!!

Abraços;

Daniel...

3 Respostas

Topicos relacionados