Question

我在Firefox和Chrome上运行的几个div上有一个鼠标悬停/鼠标移动动画。但是在IE中它只是不起作用。有没有人有任何想法，为什么之前有效呢？

var actual = 1;
var over = 0;
var over2 = 0;


function scrollleft() {

  if (actual == 1) {
    $("#vidstrip").animate({
      left: "-1060"
    });
    actual = 2;
    return;
  }
  if (actual == 2) {
    $("#vidstrip").animate({
      left: "0"
    });
    actual = 1;
    return;
  }

  stopAllYT();
}


function scrollright() {
  if (actual == 2) {
    $("#vidstrip").animate({
      left: "+0"
    });
    actual = 1;
    return;
  }
  if (actual == 1) {
    $("#vidstrip").animate({
      left: "-1060"
    });
    actual = 2;
    return;
  }
  stopAllYT();
}


$("#vidstop").on({
  'mouseenter': function() {
    overme();
  }

});

$("#vidstop").on({

  'mouseleave': function() {
    outme();
  }
});


//ARROWS OUT
function outme() {

  if (over == 1) {
    $(".leftnav").removeClass("lnavchange");
    $(".rightnav").removeClass("lnavchange2");

    $(".leftnav").toggleClass("lnavout");
    $(".rightnav").toggleClass("lnavout2");
    over = 0;
    //alert(over);
    //alert(over);
  }
  //alert('MouseOut');
  // handle mouse event here!
}



//ARROWS IN
function overme() {


  if (over == 0) {
    //remove old class
    $(".leftnav").removeClass("lnavout");
    $(".rightnav").removeClass("lnavout2");
    //add class
    $(".leftnav").toggleClass("lnavchange");
    $(".rightnav").toggleClass("lnavchange2");
    over = 1;
    //alert(over);
  }

}

#subheader {
  font-family: verdana;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #000;
  text-transform: capitalize;
}
#subcopy {
  font-family: verdana;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  color: #000;
  text-transform: capitalize;
}
#titlei {
  font-family: verdana;
  text-align: center;
  font-size: 46px;
  font-weight: bold;
  color: #000;
  text-transform: capitalize;
}
hr.undertitle {
  background: #bfbfbf;
  width: 150px;
  border: 0;
  height: 2px;
  margin: 0 auto;
}
#subcopy {
  line-height: 21px;
  font-size: 14px;
  text-align: center;
  font-family: verdana;
}
#subhead {
  line-height: 21px;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  font-family: verdana;
}
#Stage {
  text-align: center;
  width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
#slidercontainer {
  width: 1060px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
#vidspeephole {
  width: 724px;
  height: 407px;
  overflow: hidden;
  float: left;
  margin-left: 4px;
}
#vidsholder {
  width: 2896px;
  height: 407px;
  position: relative;
  float: left;
}
.vids {
  width: 724px;
  height: 407px;
  float: left;
  overflow: hidden;
}
#rightpromos {
  height: 407px;
  width: 208px;
  position: relative;
  float: left;
  margin-left: 8px;
}
#rightarrow {
  height: 407px;
  width: 54px;
  position: relative;
  float: left;
  top: 50%;
  bottom: 50%;
  margin-left: 3px;
  cursor: pointer;
}
#leftarrow {
  height: 407px;
  width: 54px;
  position: relative;
  float: left;
  top: 50%;
  bottom: 50%;
  cursor: pointer;
}
.featuredpages {
  width: 208px;
  height: 133px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
}
.paging {
  top: 10px;
  position: relative;
  height: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}
.pbutton {
  float: left;
  background: #F0F0F0;
  cursor: pointer;
  width: 15px;
  height: 15px;
  display: block;
  box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
  border-radius: 30px;
  text-decoration: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  zoom: 1;
  text-align: -webkit-match-parent;
  list-style: none;
  text-align: center;
}
.paging a.active {
  background: #999 !important;
}
.paging a:hover {
  background: #000 !important;
}
#row1 {
  position: relative;
  width: 1060px;
  overflow: hidden;
  height: 440px;
}
#row2 {
  position: relative;
  width: 1060px;
  overflow: hidden;
  height: 60px;
}
promocopy1 {
  height: 31px;
  padding: 5px;
  color: #fff;
  background-color: rgba(52, 52, 52, 0.85);
  position: relative;
  top: -41px;
  font-family: Verdana, Geneva, sans-serif;
}
#stack {
  height: 114px;
  width: 1060px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.edgeLoad-EDGE-1207420 {
  visibility: hidden;
}
#mainvidcontainer {
  width: 1060px;
  height: 698px;
  overflow: hidden;
  position: relative;
}
#vidstrip {
  height: 626px;
  width: 2120px;
  position: relative;
}
#vidstop {
  height: 626px;
  width: 1060px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.thevids {
  position: relative;
  width: 1060px;
  float: left;
  height: 596px;
}
.vidscopy {
  width: 1060px;
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  background-color: #999;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  padding-top: 4px;
}
#navis {
  z-index: 9;
  width: 1060px;
  height: 30px;
  position: relative;
}
.leftnav {
  position: absolute;
  top: 300px;
  left: -60px;
  height: 54px;
  width: 54px;
  background-color: #666;
  z-index: 1;
  border: #FFF;
  border: 1px;
  cursor: pointer;
}
.rightnav {
  position: absolute;
  top: 300px;
  right: -60px;
  height: 54px;
  width: 54px;
  background-color: #666;
  z-index: 1;
  border: #FFF;
  border: 1px;
  cursor: pointer;
}
.pagingtop {
  top: 8px;
  position: relative;
  height: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 40px;
  z-index: 2;
}
.pbuttontop {
  margin-left: 50%;
  margin-right: 50%;
  text-align: center;
  float: left;
  background: #F0F0F0;
  cursor: pointer;
  width: 15px;
  height: 15px;
  display: block;
  box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
  border-radius: 30px;
  text-decoration: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  zoom: 1;
  text-align: -webkit-match-parent;
  list-style: none;
  text-align: center;
}
.pagingtop a.active {
  background: #999 !important;
}
.pagingtop a:hover {
  background: #000 !important;
}
.lnavchange {
  animation-name: example;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  -webkit-animation-name: example;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  -ms-transform-origin: left: 100px;
}
@keyframes example {
  0% {
    left: -10px;
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    left: 22px;
    opacity: 1;
  }
}
.lnavchange2 {
  animation-name: example2;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
@keyframes example2 {
  0% {
    right: -10px;
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    right: 22px;
    opacity: 1;
  }
}
.lnavout {
  animation-name: example3;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
@keyframes example3 {
  0% {
    left: 22px;
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    left: -80px;
    opacity: 0;
  }
}
.lnavout2 {
  animation-name: example4;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
@keyframes example4 {
  0% {
    right: 22px;
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    right: -80px;
    opacity: 0;
  }
}

<div id="mainvidcontainer">

  <div id="vidstop">
    <div class="leftnav" onclick="scrollleft()"></div>
    <div class="rightnav" onclick="scrollright()"></div>
    <div id="vidstrip">

      <div class="thevids">
        <iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/kf03Z7iiIk?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
        <div class="vidscopy">Test Copy1</div>
      </div>

      <div class="thevids">
        <iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/8a05WugVHFs?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
        <div class="vidscopy">Test Copy 2</div>
      </div>

    </div>


  </div>

  <div id="navis">
    <div class="pagingtop">
      <a class="pbuttontop" id="b1" onclick="anitop1(1)"></a>
      <a class="pbuttontop" id="b2" onclick="anitop1(2)" style="margin-left:10px;"></a>
    </div>

  </div>

</div>

编辑：现在好了，只是在Internet Explorer中重叠的YouTube视频。

谢谢努诺

Answer 1

知道了！这是导航箭头前面的youtube视频。为了解决这个问题，我必须将wmode属性添加到youtube url：

WMODE =不透明

谢谢大家！希望这有助于其他人！

CSS动画无法在IE11上运行

1 个答案: