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 http://jsfiddle.net/PHYL2/ 在JSFiddle中，它的工作方式正是我想要的，但在IE10 +中，当我点击第一个“下一个”按钮时，当前部分淡出（就像它应该），但下一个永远不会消失

注意：请原谅可怕的外观，我只发布了受问题影响的代码

Answer 1

我的猜测是解密/评估你的超时执行字符串是一个问题。

为什么不使用fadeOut complete callback，而不是设置超时，例如

$('#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);
    });            
});

为什么这在IE10中不起作用，但在IE7中有效

1 个答案: