Функция jQuery не выполнена

Question

У меня есть HTML-страница, в которой использовались некоторые jquery-библиотеки. Один из них делает воздушный шар, текущий на экране. Он хорошо работает на моей локальной машине.

Когда я добавляю эту страницу в Joomla (также развертываются jQuery libs), функции, которые делают поток баллонов, не выполняются (другие функции работают хорошо).

Вот мой HTML:

<div id="submarine-container">&nbsp; 
      <div class="" id="submarine">&nbsp; 
       <div id="submarine-object">&nbsp; 
        <div id="submarine-object-above">&nbsp; 
        </div> 
       </div> 
      </div> 
     </div> 

А вот мой JQuery Lib

(function ($) { 
    alert('1'); 
    $.submarine = function (options) { 
     alert('2'); 
     // VARIABLES 
     var submarine = this; 
     var currentInd = 0; 
     var destinationInd = 0; 
     var waterLevel = 610; 
     var currentWaterPos = 0; 
     var defaults = {}; 
     submarine.settings = $.extend({}, defaults, options); 

     // CONSTRUCTOR 
     function init() { 
      $('#submarine').css('top', 115 + 'px'); 
      submarine.adjustSubmarineHorizontal(115); 
      submarine.turnLights("off"); 
      submarine.turnDir("right"); 
      submarine.floatMyBoat(); 
     } 

     // PUBLIC METHODS  
     submarine.floatMyBoat = function() { 
      if (parseInt($('#submarine').css('marginTop')) > 0) { 
       $('#submarine').animate({ 
        marginTop: '-10px' 
       }, { 
        duration: 1500, 
        easing: 'easeInOutQuad', 
        step: function() { 
         submarine.updateWaterLevel(currentWaterPos, { 
          prop: 'top' 
         }) 
        }, 
        complete: function() { 
         submarine.floatMyBoat() 
        } 
       }); 
      } else { 
       $('#submarine').animate({ 
        marginTop: '10px' 
       }, { 
        duration: 1500, 
        easing: 'easeInOutQuad', 
        step: function() { 
         submarine.updateWaterLevel(currentWaterPos, { 
          prop: 'top' 
         }) 
        }, 
        complete: function() { 
         submarine.floatMyBoat() 
        } 
       }); 
      } 
     } 

     submarine.turnDir = function (dir) { 
      this.dir = dir; 
      if (dir == "right") { 
       $('#submarine').addClass('right'); 
      } else { 
       $('#submarine').removeClass('right'); 
      } 
     } 

     submarine.turnLights = function (dir) { 
      this.lights = dir; 
      if (dir == "on") { 
       $('#submarine #submarine-lights').stop().animate({ 
        opacity: 1 
       }, { 
        duration: 900, 
        easing: 'easeInElastic' 
       }); 
      } else { 
       $('#submarine #submarine-lights').stop().animate({ 
        opacity: 0 
       }, { 
        duration: 800, 
        easing: 'easeOutQuad' 
       }); 
      } 
     } 

     submarine.adjustSubmarineHorizontal = function (top) { 
      var section_height = 1000; 
      var horizontal_center = 475 - (131/2); 
      var maximum_offset = 300; 
      var initial_top = 500; 

      // position after xx; just go straight down 
      if (top > 5300) { 
       top = 5300; 
      } 

      var degrees = ((top - initial_top)/(section_height/2)) * (Math.PI/2); 
      var left = horizontal_center + Math.sin(degrees) * maximum_offset; 
      $('#submarine').css('left', left + "px"); 
      var hanoi = document.getElementById("hanoiPoint"); 
      var cityLight = document.getElementById("cityLight"); 
      if (top < 400) { 
       $('#submarine-object-above').css('background-position', '0 0'); 
       hanoi.src = "img/hanoi_lightOff.png"; 
      } // WORLD 
      else if (top > 400 && top < 780) { 
       $('#submarine-object-above').css('background-position', '-120px 0'); 
       hanoi.src = "img/hanoi_lightOn.png"; 
      } // 3S 
      else if (top > 780 && top < 1400) { 
       $('#submarine-object-above').css('background-position', '-240px -162px'); 
       hanoi.src = "img/hanoi_lightOff.png"; 
      } // ABOUT US 
      else if (top > 1400 && top < 2200) { 
       $('#submarine-object-above').css('background-position', '-240px 0'); 
      } // EXPERIENCE STAFF 
      else if (top > 2200 && top < 3100) { 
       $('#submarine-object-above').css('background-position', '-360px 0'); 
      } // QUALITY MANAGEMENT     
      else if (top > 3100 && top < 3980) { 
       $('#submarine-object-above').css('background-position', '0 -162px'); 
      } // IP PROTECTION 
      else if (top > 3980 && top < 4850) { 
       $('#submarine-object-above').css('background-position', '-120px -162px'); 
      } // INFRASTRUCTURE 
      else if (top > 4850 && top < 5210) { 
       $('#submarine-object-above').css('background-position', '-360px -162px'); 
       cityLight.src = "img/city_lightOff.png"; 
       $('#projectBriefText').css('color', 'white'); 
      } // PROJECT MANAGEMENT 
      else if (top > 5210) { 
       cityLight.src = "img/city_lightOn.png"; 
       $('#projectBriefText').css('color', 'black'); 
      } 
     } 


     submarine.updateWaterLevel = function (currentTop, fx) { 
      if (fx.prop == "top") { 
       currentWaterPos = currentTop; 
       var h = waterLevel - currentTop - parseInt($('#submarine').css('marginTop')); 
       h = (h < 0) ? 0 : (h > 84) ? 161 : h; 
       $('#submarine-object-above').css('height', h + 'px'); 
      } 
     } 

     submarine.showBubbles = function() { 
      //stop floating animation for performance 
      $('#submarine').stop(); 

      //show bubbles and animate them back out, also restart the floating 
      $('#bubbles').stop(true, false).animate({ 
       opacity: 1 
      }, 200, 'easeOutExpo').animate({ 
       opacity: 0 
      }, { 
       duration: 400, 
       easing: 'easeOutQuint', 
       complete: function() { 
        submarine.floatMyBoat() 
       } 
      }); 


     } 

     // INIT 
     init(); 

     return submarine; 
    } 

})(jQuery); 

Единственное предупреждение ('1') бежать, и он не может перейти в боевой готовности ('2') ,

Answer 1

Это потому, что никто не вызывает функцию $.submarine. Вам нужно вызвать функцию с помощью

$.submarine({}); 

Demo: Fiddle