如何阻止這個jQuery出錯？

-1

所以我想創建一個有兩層的盒子：前一層和後一層。它們將堆疊在彼此的頂部，因此背層默認隱藏。如何阻止這個jQuery出錯？

當您將鼠標懸停在方框的頂部（技術層）時，前層應該向上滑動以顯示背層。我試圖通過使用.slideUp()和.slideDown()來做到這一點，但它一直在竊取同時顯示兩個圖層。所以然後我切換到.slideUp()和.fadeIn()但這似乎沒有太多的幫助。

正如你所看到的，它有時會同時顯示的div時，它不應該，它也滑多次隨機。我怎麼能讓這更高效？

這裏是一個JsFiddle

UPDATE：

問題尋求幫助調試（「爲什麼不是這個代碼的工作？」）必須包括所期望的行爲，一個特定的問題或錯誤以及在問題本身中重現它所需的最短代碼。沒有明確問題陳述的問題對其他閱讀器無用。

這就是人們投票結束這個答案的原因......從這個列表中，這個問題沒有什麼？

Desired behavior? - Check 
Specific problem? - Check 
Shortest code necessary? - Check 
Clear problem? - check

來源

2016-09-24 ProEvilz

護理解釋downvote？腳本幾乎可以工作，只需調整即可。 – ProEvilz

您應該在您的問題中包含小時代碼，而不僅僅是小提琴的鏈接。 –

爲什麼？把它放到兩個帖子裏似乎是反作用的。 – ProEvilz

你並不真的需要使用效果基本show和了slideDown，您可以通過使用轉換和過渡CSS3實現幻燈片效果屬性。

更新JS提琴：https://jsfiddle.net/9uw2q24h/3/

的Javascript：

$('.outer').hover(function() { 
    $(this).children('.front').addClass('front-up'); 
}, function() { 
    $(this).children('.front').removeClass('front-up'); 
});

CSS：

.outer { 
    position: relative; 

    .front, 
    .back { 
    text-align: center; 
    width: 100%; 
    } 
    .back { 
    display: block; 
    } 
    .front { 
    position: absolute; 
    transition: 0.5s ease; 
    } 
    .front-up { 
    transform: translateY(-100%); 
    } 
}

如果你要支持舊的瀏覽器，確保供應商的前綴添加到轉換和轉換規則（-webkit-，-moz-等）。

來源

2016-09-24 21:52:48 Brunt

不錯的解決方案，但我會在樣式中添加'.well'類，併爲其提供一個「margin-bottom：0」來保證穩定性。 – Daniel

你可以做到這一點，如：

var running = false; 
$('.outer').hover(function() { 
    if (!running) { 
    running = true; 
    $(this).children('.front').slideUp(function() { 
     $(this).next('.back').slideDown(function() { 
     running = false; 
     }); 
    }); 
    } 
}, function() { 
    if (!running) { 
    running = true; 
    $(this).children('.back').slideUp(function() { 
     $(this).prev('.front').slideDown(function() { 
      running = false; 
     }); 
    }); 
    } 
});

說明：只要動畫開始保存狀態在一個變量，以避免衝突（否則會被再次調用）。此外與slideDown和slideUp相結合，你有一個更平滑的動畫。你有一個不是很好的閃爍與您的fadeOut組合slideDown

小提琴：https://jsfiddle.net/dL7ckq6b/

來源

2016-09-24 21:51:25

通過對CSS進行輕微調整，特別是使元素的position屬性爲絕對值，將會使您的back元素從頭開始位於前方元素後面，現在只需顯示/隱藏前方元素。

的Javascript：

$('.outer').hover(function() { 
$('.front').slideUp(); 
    console.log("IN"); 
}, function() { 
    $('.front').slideDown(); 
    console.log("OUT"); 
});

我也更新CSS更清楚地顯示發生的效果。

CSS：

.outer { 
    .front, 
    .back { 
    text-align: center; 
    position: absolute; 
    padding: 20px 10px; 
    border: 2px solid yellow; 
    } 

    .front { 
    z-index: 10; 
    background-color: red; 
    } 

    .back { 
    z-index: 0; 
    background-color: blue; 
    } 
}

這裏是的jsfiddle：https://jsfiddle.net/z8e7eb4b/

來源

2016-09-24 22:05:54

如何阻止這個jQuery出錯？

回答

相關問題