Hi there, i have a little problem, tried googling it but there are more questions about this than answers, and nothing that i found isn't working for me. Ok. I want to place jquery code into external file, tried this way. But after adding this, other jquery functions on my site stops working too.

Let's say i want to use this code, and i put it in /js/main.js:

1. <script>
   $(document).ready(function() {
   $("div#box1").mouseover(function () {
   $(this).animate({
   "border-color": "#0c71b1"
   }, 500);});
   
   $("div#box1").mouseout(function () {
   $(this).animate({
   "border-color": "#000000"
   }, 300);});
   });
   
   </script>
   
   
   
   
   
   
   
   
   
   
   
   
   
   

I'll change it to:

1. (function($){
   border = function() {
   $("div#box1").mouseover(function () {
   $(this).animate({
   "border-color": "#0c71b1"
   }, 500);});
   
   $("div#box1").mouseout(function () {
   $(this).animate({
   "border-color": "#000000"
   }, 300);});
   })(jQuery);
   
   
   
   
   
   
   
   
   
   
   
   

And add to main index file:

1. <script src="js/main.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   
   
   <script type="text/javascript">
   $(document).ready(function(){
   border();
   });
   </script>
   
   
   
   
   
   
   
   
   
   

But still, this isn't working. Any ideas?