CODEWITHSUNDEEP
jqueryhtmlinternet-explorer
CumminUp07
CumminUp07

Reputation: 119

Why would this not work in IE10, but works in IE7

I have a form that I want to break up into three different sections each with a "next" and "back" button to show the next or previous section respectively. For the most part it is working how i want, except in IE10+. it works in Firefox, Chrome, and IE7 (not sure about 8 and 9).

the part of the code that isn't working is:

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

here is the jsfiddle http://jsfiddle.net/PHYL2/ in JSFiddle it works exactly how i want, but in IE10+ when i click the first "next" button, the current section fades out (like it should) but the next never fades in

NOTE: please excuse the horrid looks, i have only posted the code affected by the problem

Upvotes: 0

Views: 68

Answers (1)

Phil
Phil

Reputation: 164741

My guess is it's a problem deciphering / evaluating your timeout execution strings.

Rather than setting a timeout, why not just use the fadeOut complete callback, eg

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

I'd actually go a step further and make this much more generic.

Say your trigger elements look something like this...

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

Then you can write one generic handler...

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

Upvotes: 3

Related Questions