Której wersji IE używasz? Poniżej masz poprawiony kod HTML i CSS, bo Twój kod nawet pod Firefox’em nie chodził, a IE z menu robił schody;
ALE
IE nadal czepia się argumentów funkcji w pliku jquery.min.js. Opera i Firefox nie. Jeśli dojdę do tego co mu leży na wątrobie, dam znać. Wstaw grafikę jaki efekt zamierzasz uzyskać.
To nie jest cały kod html i css, nie będę go tu wklejać bo problem nie dotyczy fragmentu #MENU, skrypt jest podany cały.
@Pepek1989
IE9 x86 i x64
Nie wiem z których wersji przeglądarek korzystasz ale nic mi się nie rozjeżdża, ani cała strona, ani jeśli użyje tylko podanych przeze mnie fragmentów kodu, sprawdzałem pod Firefox 13.0, Opera 12.00, Iron 19, IE9, z resztą nie o to tutaj się rozchodzi. Fragment skryptu o którym pisałem działa tylko i wyłącznie na Ironie.
EDIT:
Problemem jest plugin jquery-color (zapomniałem wcześniej napisać że używam tego dodatku), po usunięciu w pierwszej części skryptu właściwości background-color skrypt działa
Rozsypywało się na IE8. IE9 nie chce mi się instalować szczerze powiedziawszy
Powalczyłem i ten skrypt działa na IE8, FFox i Opera. IE8 nie wyświetla zaokrągleń, IE9 już tak, i zdaje się że IE9 nie bedzie wymagało drugiej linijki ( $(this).stop().animate({“padding-bottom”:“50px”},500);), ponieważ prawidłowo zanimuje nam padding dla elementu ‘a’. Na wszelki wypadek sprawdź. Powinno zadziałać.
UWAGA - ważna rzecz: aby dobrze animować kolory (używając backgroundColor, czy background-color) w jQuery trzeba dokleić sobie trochę kodu poprawiającego działanie tych animacji, ponieważ jQuery ma trochę buga w tej kwestii
Kod porawki dla buga animacji kolorów:
/ ****************************************************************************** /
/ ******************************COLOR ANIMATIONS****************************** /
/ ****************************************************************************** /
// override the animation for color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor',
'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'],
function(i, attr) {
$.fx.step[attr] = function(fx) {
if (!fx.colorInit) {
fx.start = getColor(fx.elem, attr);
fx.end = getRGB(fx.end);
fx.colorInit = true;
}
fx.elem.style[attr] = 'rgb(' +
Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';
};
});
// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/
// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
var result;
// Check if we're already dealing with an array of colors
if ( color && color.constructor == Array && color.length == 3 )
return color;
// Look for rgb(num,num,num)
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];
// Look for rgb(num%,num%,num%)
if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
// Look for #a0b1c2
if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
// Look for #fff
if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
// Look for rgba(0, 0, 0, 0) == transparent in Safari 3
if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
return colors['transparent'];
// Otherwise, we're most likely dealing with a named color
return colors[$.trim(color).toLowerCase()];
}
function getColor(elem, attr) {
var color;
do {
color = $.curCSS(elem, attr);
// Keep going until we find an element that has color, or we hit the body
if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
break;
attr = "backgroundColor";
} while ( elem = elem.parentNode );
return getRGB(color);
};
JS (zmianiłem .horizontal-menu a na .horizontal-menu li dla ładniejszego kodu
W stylach CSS ustaw background-color:#FFF; dla .horizontal-menu. Wtedy powinno zadziałać zadziała. Po prostu druga wersja chce animować tło dla całego .horizontal-menu. Ale na początku nie ma wartości. I jQuery sobie z tym nie radzi.
Dodałem background-color dla .horizontal-menu i działa, tyle że Firefox nadal ma problem bo odtwarza animację za tylko pierwszym razem, a jeśli dodam kolor za pomocą RGBa to nie działa w ogóle w FF.
pierwsze pytanie co do tego: czysty jQuery 1.7 obsługuje backgroundColor? Z tego co wiem jest to tylko w jQuery UI.
drugie: gdzie ten kod wstawić? Domyślam się że trzeba edytować plik jQuery, tak?
Czysty jQuery nie obsłuży Ci backgroundColor. Wniosek ten opieram na własnych doświadczeniach - mi na testowej stronce z helpa dla Ciebie nie działał a mam dynamicznie zasysane
Edytować pliku jQuery nie musi. Ten spory kawałek kodu z poprawki możesz najzwyczajniej w świecie wstawić na stronie w bloku , alboo zapisać go w pliku powiedzmy poprawka.js i w sekcji strony dodać referencję:
I byłbym zapomniał: u mnie Firefox wyświetla zawsze dobrze, nie wiem co masz na myśli mówiąc że u Ciebie tylko za pierwszym razem. Jeśli to, że menu tylko się rozwija, to problem tkwi z drugiej funkcji akcji hover(). Tam w warunkach masz background-color w formie rgba. I to nam nie zadziała.
Mam na myśli, że jeśli najadę za pierwszym razem to się rozwinie, a później zwinie ale po najechaniu drugi raz na ten sam odnośnik animacja już się nie wykonuje. Zobaczę tę poprawkę i później napiszę.
