jquery ライブラリを使用した HTML ページがあります。そのうちの 1 つは、画面上を流れる風船を作成します。私のローカルマシンでは問題なく動作します。
そのページを Joomla に追加すると (jQuery ライブラリもデプロイされます)、バルーンを流す機能は実行されません (別の機能はうまく機能します)。
ここに私のHTMLがあります：
<div id="submarine-container">
<div class="" id="submarine">
<div id="submarine-object">
<div id="submarine-object-above">
</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') にジャンプできません。