Question

好的，我目前正在为我的夫人使用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>

这是我使用过的脚本我从教程中复制它，因为我没有太多的经验。我相信这是与不透明度值有关但无法找到我需要修复它的任何帮助将是伟大的thx。

P.s - 我使用的jquery是1.6.2min.js

该网站为http://www.emerrillsphotography.co.uk

Answer 1

我认为9之前的Internet Explorer版本不能正确支持作为CSS属性的不透明度。

你必须使用类似的东西：

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

用于IE8和

filter: alpha(opacity=50);

for 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

Answer 2

尝试使用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>

希望它有所帮助！

jquery菜单只出现在firefox chrome和ie9上

2 个答案: