為什么這在IE10中不起作用，但在IE7中起作用

Question

我有一個表格，我想分為三個不同的部分，每個部分都帶有一個“下一個”和“后退”按鈕，分別顯示下一個或上一個部分。 在大多數情況下，它的工作方式是我想要的，除了IE10 +。 它適用於Firefox，Chrome和IE7（不確定8和9）。

代碼不起作用的部分是：

$("#sell_body2").hide();
$("#sell_body3").hide();


$('#sell_next1').click(function () {
    $("#sell_body1").fadeOut(250);
    setTimeout('$("#sell_body2").fadeIn(250)', 250);
});
$('#sell_next2').click(function () {
    $("#sell_body2").fadeOut(250);
    setTimeout('$("#sell_body3").fadeIn(250)', 250);
});
$('#sell_back2').click(function () {
    $("#sell_body2").fadeOut(250);
    setTimeout('$("#sell_body1").fadeIn(250)', 250);
});
$('#sell_back3').click(function () {
    $("#sell_body3").fadeOut(250);
    setTimeout('$("#sell_body2").fadeIn(250)', 250);
});

這是JSFiddle中的jsfiddle http://jsfiddle.net/PHYL2/ ，它的工作原理完全符合我的要求，但是在IE10 +中，當我單擊第一個“下一個”按鈕時，當前部分淡出（像應該的那樣），但是下一個永遠不會淡入

注意：請原諒我看起來很恐怖，我只發布了受問題影響的代碼

Answer 1

我的猜測是解密/評估您的超時執行字符串是一個問題。

除了設置超時之外，為什么不直接使用fadeOut complete回調 ，例如

$('#sell_next1').on('click', function() {
    $('#sell_body1').fadeOut(250, function() {
        $('#sell_body2').fadeIn(250);
    });
});

我實際上將更進一步，使之更加通用。

假設您的觸發元素看起來像這樣...

<button id="sell_next1" class="next-btn"
    data-target-out="#sell_body1" data-target-in="#sell_body2">Hide body1, show body2</button>

然后，您可以編寫一個通用處理程序...

$('.next-btn').on('click', function(e) {
    e.preventDefault();
    var $this = $(this),
        in = $this.data('target-in'),
        out = $this.data('target-out');
    $(out).fadeOut(250, function() {
        $(in).fadeIn(250);
    });            
});