JQuery меню появляется только на Firefox Chrome и ie9 - PullRequest
Новая
       4

JQuery меню появляется только на Firefox Chrome и ie9

0 голосов
/ 10 августа 2011

Хорошо, я сейчас создаю сайт для моей миссис, используя html и экспериментирую с jquery.Все работает фантастически хорошо, пока все, что связано с ie6,7, или 8 не будет вовлечено.в этот момент меню навигации не отображается. 

enter code here
<script type="text/javascript">
    $(function() {
        // set opacity to nill on page load
        $("ul#menu span").css("opacity","0");
        // on mouse over
        $("ul#menu span").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, "slow");
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, "slow");
        });
    });
</script>

это сценарий, который я использовал, я скопировал его из учебника, так как у меня не было большого опыта.Я полагаю, что это как-то связано со значениями непрозрачности, но я не могу найти то, что мне нужно, чтобы это исправить. Любая помощь будет велика.

Ps - jquery, который я использую, - 1.6.2min.js

сайт http://www.emerrillsphotography.co.uk

Ответы [ 2 ]

2 голосов
/ 10 августа 2011

Я считаю, что непрозрачность как свойство CSS не поддерживается должным образом версиями Internet Explorer до 9.

Вы должны использовать что-то вроде: 

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

для IE8 и 

filter: alpha(opacity=50);

для IE7

http://acidmartin.wordpress.com/2008/11/28/setting-opacity-and-other-filters-in-internet-explorer-8/

http://www.quirksmode.org/css/opacity.html

http://www.w3.org/TR/css3-color/#transparency

0 голосов
/ 10 августа 2011

Попробуйте использовать вместо fadeIn -Out:

Хорошо. Я думаю, что функции jQuery fadeIn / -Out делают то, что вы хотите. Вы уверены, что позаботились о кросс-браузерной проблеме с помощью прозрачности. 

<script type="text/javascript">
$(function() {
    // jQuery fadeIn/-Out fading out an element and at the end sets display = block/none
    // fadeOut(0) means fading out all at once. same as .hide();
    // Hiding the span:
    $("ul#menu span").fadeOut(0);
    // Now is the span element's display none and therefore not hittable.
    // So we have to hover the a tag instead witch is the wrapper around the span
    $("ul#menu a").hover(function () {
        // this = a tag in HTMLelement -> find span tag -> stop animation (if any) . fadeIn("slow"); You can change "slow" out with a number eg. 564 -> 564 mil.sec.
        $(this).find("span").stop().fadeIn("slow");
    },function () {
        // this -> find span tag -> stop animation (if any) . fadeOut("slow");
        $(this).find("span").stop().fadeOut("slow");
    });
});
</script>

Надеюсь, это поможет!

...