JavaScript的問題與懸停

我具有菜單的滑動，其中包含3個元素（div的）

動畫元素，想法是，每一個上懸停從33％擴大其寬度60，而在同一時間另外兩個縮小到20％，因此100％絕不會超過。JavaScript的問題與懸停

兩個問題我有現在：

在從元1快速鼠標移動到元素3，屏幕開始出現有趣的，因爲它閃爍像懸停元件2上被稱爲（因爲鼠標移過元素2到達元素3），並且產生空白區域並溢出一兩秒鐘，直到元素3上的懸停函數發生。
- 我想去阻止這種使用超時功能，但它不能是一個很好的解決方案，因爲它沒有工作
一旦我這個容器，元素1上懸停，這是盤旋關閉最後一次徘徊，停留在60％，並沒有返回。不太確定在哪裏設置此行爲。懸停另一個元素，然後檢查，或者mouseout，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%;} 
}

來源

2016-02-02 desicne

可能會更好， onmouseleave？事件被激發的次數更少。 – animaacija

好的，會做到這一點，但不知道它有助於我的問題 – desicne

我希望它可以解決第一個問題，而不是兩個，再加上，easyer在鼠標輸入和鼠標離開時切換class * expanded *，並使用css3-轉換 – animaacija

Tryng同步不同的變化是相當困難的。

好多從根本上改變方法：使用Flex其autoAdjust非徘徊項目

.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%; 
 
}

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

如果u使用OnMouseEnter在

來源

2016-02-02 22:34:48 vals

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

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

<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>

來源

2016-02-02 22:34:52 animaacija

JavaScript的問題與懸停

回答

相關問題