Jquery Firefox中的转换失败_Jquery_Html_Css_Firefox

Jquery Firefox中的转换失败

jquery html css firefox

Jquery Firefox中的转换失败,jquery,html,css,firefox,Jquery,Html,Css,Firefox,我有一个菜单，单击其中一个元素后，它会以这种形式向左移动：/。现在，这种转换可以在chrome和explorer中使用，但在firefox中不起作用。我怎样才能修好它 JSFIDDLE： HTML: <div id="menu" class="menu"> <ul class="headlines"> <li id="item1"><button>aa</button></li>

我有一个菜单，单击其中一个元素后，它会以这种形式向左移动：/。现在，这种转换可以在chrome和explorer中使用，但在firefox中不起作用。我怎样才能修好它

JSFIDDLE：

HTML:

 <div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1"><button>aa</button></li>
            <li id="item2"><button>A</button></li>
            <li id="item3"><button>B        </button></li>
            <li id="item4"><button>C         </button></li>
            <li id="item5"><button>D   </button></li>
            <li id="item6"><button>E       </button></li>
            <li id="item7"><button>F       </button></li>
        </ul>
        </div>

li {
    list-style-type: none;
    font-size: 1.5em;
    padding-top: 8px;
    text-align:center;
    border-style: none;
}


.menu li {
    position: relative;
    top: 180px;
    left: 0px;
}
#item7 {
    transition: opacity .8s, left .8s ease-out;
    -moz-transition: opacity .8s, left .8s ease-out;
    -webkit-transition: opacity .8s, left .8s ease-out;
    -o-transition: opacity .8s, left .8s ease-out;
    margin-left:105px 
}
#item6 {
    transition: opacity 1s, left 1s ease-out;
    -moz-transition: opacity 1s, left 1s ease-out;
    -webkit-transition: opacity 1s, left 1s ease-out;
    -o-transition: opacity 1s, left 1s ease-out;
    margin-left: 95px;
}
#item5 {
    transition: opacity 1.2s, left 1.2s ease-out;
    -moz-transition: opacity 1.2s, left 1.2s ease-out;
    -webkit-transition: opacity 1.2s, left 1.2s ease-out;
    -o-transition: opacity 1.2s, left 1.2s ease-out;
    margin-left: 60px;
}
#item4 {
    transition: opacity 1.4s, left 1.4s ease-out;
    -moz-transition: opacity 1.4s, left 1.4s ease-out;
    -webkit-transition: opacity 1.4s, left 1.4s ease-out;
    -o-transition: opacity 1.4s, left 1.4s ease-out;
    margin-left: 123px;
}
#item3 {
    transition: opacity 1.6s, left 1.6s ease-out;
    -moz-transition: opacity 1.6s, left 1.6s ease-out;
    -webkit-transition: opacity 1.6s, left 1.6s ease-out;
    -o-transition: opacity 1.6s, left 1.6s ease-out;
    margin-left: 113px;
}
#item2 {
    transition: opacity 1.8s, left 1.8s ease-out;
    -moz-transition: opacity 1.8s, left 1.8s ease-out;
    -webkit-transition: opacity 1.8s, left 1.8s ease-out;
    -o-transition: opacity 1.8s, left 1.8s ease-out;
    margin-left: 130px;
}
#item1 {
    transition: opacity 2s, left 2s ease-out;
    -moz-transition: opacity 2s, left 2s ease-out;
    -webkit-transition: opacity 2s, left 2s ease-out;
    -o-transition: opacity 2s, left 2s ease-out;
    margin-left: 117px;
}

#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item5>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}

.permahover li {
    opacity: 1;
    left: -33%;
}
.headlines li {
    font-size:1.5em;
    color:#000000;
    transition: all 0.5s;
    cursor: pointer;
}
.headlines:hover li, .headlines.active li {
    /* PARENT HOVER */
    opacity:0.4;
    cursor: pointer;
    /* Dim all */
}
.headlines li:hover, .headlines li.active {
    /* SINGLE HOVER */
    opacity: 1;
    /* Max one */
    color:#000000;
    cursor: pointer;
}

$(".menu").on("click", function () {
  $(".menu").addClass('permahover');

});


 var $li = $('.headlines li').click(function() {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);

    $li.removeClass('active');
    $(this).toggleClass('active', state);
});

JQUERY:

 <div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1"><button>aa</button></li>
            <li id="item2"><button>A</button></li>
            <li id="item3"><button>B        </button></li>
            <li id="item4"><button>C         </button></li>
            <li id="item5"><button>D   </button></li>
            <li id="item6"><button>E       </button></li>
            <li id="item7"><button>F       </button></li>
        </ul>
        </div>

li {
    list-style-type: none;
    font-size: 1.5em;
    padding-top: 8px;
    text-align:center;
    border-style: none;
}


.menu li {
    position: relative;
    top: 180px;
    left: 0px;
}
#item7 {
    transition: opacity .8s, left .8s ease-out;
    -moz-transition: opacity .8s, left .8s ease-out;
    -webkit-transition: opacity .8s, left .8s ease-out;
    -o-transition: opacity .8s, left .8s ease-out;
    margin-left:105px 
}
#item6 {
    transition: opacity 1s, left 1s ease-out;
    -moz-transition: opacity 1s, left 1s ease-out;
    -webkit-transition: opacity 1s, left 1s ease-out;
    -o-transition: opacity 1s, left 1s ease-out;
    margin-left: 95px;
}
#item5 {
    transition: opacity 1.2s, left 1.2s ease-out;
    -moz-transition: opacity 1.2s, left 1.2s ease-out;
    -webkit-transition: opacity 1.2s, left 1.2s ease-out;
    -o-transition: opacity 1.2s, left 1.2s ease-out;
    margin-left: 60px;
}
#item4 {
    transition: opacity 1.4s, left 1.4s ease-out;
    -moz-transition: opacity 1.4s, left 1.4s ease-out;
    -webkit-transition: opacity 1.4s, left 1.4s ease-out;
    -o-transition: opacity 1.4s, left 1.4s ease-out;
    margin-left: 123px;
}
#item3 {
    transition: opacity 1.6s, left 1.6s ease-out;
    -moz-transition: opacity 1.6s, left 1.6s ease-out;
    -webkit-transition: opacity 1.6s, left 1.6s ease-out;
    -o-transition: opacity 1.6s, left 1.6s ease-out;
    margin-left: 113px;
}
#item2 {
    transition: opacity 1.8s, left 1.8s ease-out;
    -moz-transition: opacity 1.8s, left 1.8s ease-out;
    -webkit-transition: opacity 1.8s, left 1.8s ease-out;
    -o-transition: opacity 1.8s, left 1.8s ease-out;
    margin-left: 130px;
}
#item1 {
    transition: opacity 2s, left 2s ease-out;
    -moz-transition: opacity 2s, left 2s ease-out;
    -webkit-transition: opacity 2s, left 2s ease-out;
    -o-transition: opacity 2s, left 2s ease-out;
    margin-left: 117px;
}

#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item5>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}

.permahover li {
    opacity: 1;
    left: -33%;
}
.headlines li {
    font-size:1.5em;
    color:#000000;
    transition: all 0.5s;
    cursor: pointer;
}
.headlines:hover li, .headlines.active li {
    /* PARENT HOVER */
    opacity:0.4;
    cursor: pointer;
    /* Dim all */
}
.headlines li:hover, .headlines li.active {
    /* SINGLE HOVER */
    opacity: 1;
    /* Max one */
    color:#000000;
    cursor: pointer;
}

$(".menu").on("click", function () {
  $(".menu").addClass('permahover');

});


 var $li = $('.headlines li').click(function() {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);

    $li.removeClass('active');
    $(this).toggleClass('active', state);
});

它在Firefox中对我有效——你测试的是哪个版本的Firefox？对我也有效——使用相同的版本（在OSX上）。你能检查一下控制台有没有JS错误吗？你能解释一下什么不起作用吗？我看不出Firefox38和Chrome有什么区别43@light问题解决了，只需清除cacheIt，它在Firefox中对我有效——你测试的是哪个版本的Firefox？对我也有效——使用相同的版本（在OSX上）。你能检查一下控制台有没有JS错误吗？你能解释一下什么不起作用吗？我看不出Firefox38和Chrome有什么区别43@light问题解决了，只需清除缓存即可