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

0

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

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

Вот мой 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").

Теги:
joomla

1 ответ

0
Лучший ответ

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

$.submarine({});

Демо: скрипка

  • 0
    Не могли бы вы рассказать подробнее? Эта функция хорошо работает на моем локальном компьютере, но не работает при развертывании. И как я должен измениться? О том коде, который вы упоминаете, где я должен его поставить? Спасибо
  • 0
    На вашем локальном компьютере вы, возможно, добавили приведенный выше код ... проверьте это в своей локальной кодовой базе ... посмотрите на прикрепленную мною скрипку, чтобы увидеть, как ее нужно добавить
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню