Question

我在菜单中有一个幻灯片，其中包含3个元素（div＆＃39; s），想法是每个人在悬停时将其宽度从33％扩展到60，同时其他两个缩小到20％，因此永远不会超过100％。

我现在遇到的两个问题：

在快速鼠标从元素1移动到元素3时，屏幕开始表现得很有趣，因为它正在调用像悬停在元素2上的那样（因为鼠标遍历元素2到达element3），并导致空格和溢出一秒或两秒，直到元素3上的悬停功能发生。
- 我尝试使用超时功能停止此操作，但它一定不是一个好的解决方案，因为它不起作用
当我将鼠标悬停在此容器上时，悬停在元素1上，这是最后一次悬停，保持在60％，并且不会返回。不太确定在哪里设置此行为。在悬停其他元素然后检查或鼠标移动时，idk。

代码..

HTML

<div id="elem1" onmouseover="focusDiv('elem1')">
   <div style="position: relative; top: 50%; left: 0">E1</div>
</div>

<div id="elem2" onmouseover="focusDiv('elem2')">
   <div style="position: relative; top: 50%; right: 0">E2</div>
</div>

<div id="elem3" onmouseover="focusDiv('elem3')">
   <div style="position: relative; top: 50%; right: 0">E3</div>
</div>

JS功能

function focusDiv(menuItem) {

var nameOne = 'elem1';
var nameTwo = 'elem2';
var nameThree = 'elem3';

if (menuItem == nameOne){
    var main = document.getElementById("elem1");
    var siblingOne = document.getElementById("elem2");
    var siblingTwo = document.getElementById("elem3");
} else if (menuItem == nameTwo){
    var main = document.getElementById("elem2");
    var siblingOne = document.getElementById("elem1");
    var siblingTwo = document.getElementById("elem3");
} else if (menuItem == nameThree){
    var main = document.getElementById("elem3");
    var siblingOne = document.getElementById("elem2");
    var siblingTwo = document.getElementById("elem1");
} else {
    console.log('Something wrong');
};

if(hoverActive || (siblingOne.style.width == "59%" || siblingTwo.style.width == "59%")){
    if(siblingOne.style.width == "59%"){

        siblingOne.style.WebkitAnimation = "return-large-width 1s 1 ease-in-out";
        siblingOne.style.animation = "return-large-width 1s 1 ease-in-out";
        siblingOne.style.width = "20%";

        main.style.WebkitAnimation = "expand-large-width 1s 1 ease-in-out";
        main.style.animation = "expand-large-width 1s 1 ease-in-out";
        main.style.width = "59%";

    } else if (siblingTwo.style.width == "59%"){

        siblingTwo.style.WebkitAnimation = "return-large-width 1s 1 ease-in-out";
        siblingTwo.style.animation = "return-large-width 1s 1 ease-in-out";
        siblingTwo.style.width = "20%";

        main.style.WebkitAnimation = "expand-large-width 1s 1 ease-in-out";
        main.style.animation = "expand-large-width 1s 1 ease-in-out";
        main.style.width = "59%";

    }

} else {
    main.style.WebkitAnimation = "expand-width 1s 1 ease-in-out";
    main.style.animation = "expand-width 1s 1 ease-in-out";
    main.style.width = "59%";

    siblingOne.style.WebkitAnimation = "shrink-width 1s 1 ease-in-out";
    siblingOne.style.animation = "shrink-width 1s 1 ease-in-out";
    siblingOne.style.width = "20%";

    siblingTwo.style.WebkitAnimation = "shrink-width 1s 1 ease-in-out";
    siblingTwo.style.animation = "shrink-width 1s 1 ease-in-out";
    siblingTwo.style.width = "20%";
    hoverActive = true;
}

}

CSS动画

@keyframes expand-width {
    from { width: 33%;}
    to {width: 59%;}
}

@keyframes expand-large-width {
    from { width: 20%;}
    to {width: 59%;}
}

@keyframes shrink-width {
    from { width: 33%;}
    to {width: 20%;}
}

@keyframes return-width {
    from { width: 59%;}
    to {width: 33%;}
}

@keyframes return-large-width {
    from { width: 59%;}
    to {width: 20%;}
}

Answer 1

尝试同步不同的更改非常困难。

更好地彻底改变方法：使用flex来自动调整非悬停物品

＆＃13;

.container {
  display: flex;
  border: solid 1px green;
  width: 100%;
  height: 100px;
 }
.test {
  flex: 33% 1 1;
  background-color: lightgreen;
  margin: 10px;
  transition: flex-basis 1s 0.3s;
 }

.test:hover {
  flex-basis: 60%;  
}

＆＃13;

<div class="container">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>

＆＃13;

Answer 2

＆＃13;

addClass = function(el){
  el.classList.add('expanded')
}
removeClass = function(el){
  el.classList.remove('expanded')
}

＆＃13;

#elem1,#elem2,#elem3{
  transition: all 1s;
  width: 50%;
  background:#ddd;
}
.expanded{
  width:90%!important;
  background:#999!important;
}

＆＃13;

<div id="elem1"class="default" onmouseover="addClass(this)" onmouseout="removeClass(this)">
   <div>E1</div>
</div>

<div id="elem2"class="default" onmouseover="addClass(this)" onmouseout="removeClass(this)">
   <div>E2</div>
</div>

<div id="elem3" class="default" onmouseover="addClass(this)" onmouseout="removeClass(this)">
   <div>E3</div>
</div>

＆＃13;

悬停时动画元素的JavaScript问题

2 个答案: