我有一个菜单,点击其中一个元素后,它会以这种形式向左移动:/。现在转换工作在chrome和explorer中,但在firefox中没有。我该如何解决?
JSFIDDLE:http://jsfiddle.net/kvey3d12/
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>
CSS:
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;
}
JQUERY:
$(".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);
});