Konflikt mellem scripts
Hej EksperterTil en menu skal jeg bruge 3 stk. javascripts, to der skifter baggrundsbillede, og et der laver en dropdown menu.
Hver for sig virker de fint, men hvis de kombineres i en menu, hvor man skal have et baggrundsbillede der skifter og en dropdown, så vises dropdownmenuen ikke.
Forslag til hvordan jeg får det til at virke?
De første to koder er til at skifte baggrundsbilledet:
-----------------------------------------------------------
$(function(){
$('#menu span')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -118px)"}, {duration:800})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:800})
})
});
-----------------------------------------------------------
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
-----------------------------------------------------------
$(function () {
$('.dropdown').each(function () {
$(this).parent().eq(0).hoverIntent({
timeout: 100,
over: function () {
var current = $('.dropdown:eq(0)', this);
current.slideDown(100);
},
out: function () {
var current = $('.dropdown:eq(0)', this);
current.fadeOut(200);
}
});
});
$('.dropdown a').hover(function () {
$(this).stop(true).animate({paddingLeft: '35px'}, {speed: 100, easing: 'easeOutBack'});
}, function () {
$(this).stop(true).animate({paddingLeft: '0'}, {speed: 100, easing: 'easeOutBounce'});
});
pic1 = new Image(310, 672);
pic1.src = "images/dropdown.png";
pic2 = new Image(4, 40);
pic2.src = "images/dropselectionleft.png";
pic3 = new Image(394, 40);
pic3.src = "images/dropselectionright.png";
});