Question

我正在努力向左移动旧问题，从右边开始新问题。你可以在这个jsFiddle中看到我在做什么：

$(document).ready(function () {
    //$('ul').roundabout();
    $("#question2").hide();
    $("#question3").hide();

    var x = 1;
    $("input[type='radio']").change(function () {
        var selection = $(this).val();
        //alert("Radio button selection changed. Selected: " + selection);
        $("#question" + x).hide("slide", {
            direction: "left"
        }, 800);
        x++;
        $("#question" + x).show("slide", {
            direction: "right"
        }, 800);
    });
});

但是当我在jsFiddle之外工作时（主要是因为它不能正确地从GitHub加载roundabout.js文件）我似乎无法让show（）和hide（）正常工作。我有完全相同的代码（引用roundabout.js取消注释），它将完全忽略第一个隐藏和显示引用，然后跳过下一个隐藏命令并显示下一个问题。

有关为什么它不会在click事件中触发hide（）和show（）函数的任何想法？

编辑：编辑最新的jsFiddle。它在那里工作，但不在那个环境之外。

Answer 1

将事件绑定在DOM ready事件

中

如果您在jsFiddle中检查来源，则会看到所有code enclosed in the DOM ready event。所以看起来它在这里工作而不是你的本地版本。

$(document).ready(function () {
    //$('ul').roundabout();
    $("#question2").hide();
    $("#question3").hide();

    var x = 1;
    $("input[type='radio']").change(function () {
        var selection = $(this).val();
        //alert("Radio button selection changed. Selected: " + selection);
        $("#question" + x).hide("slide", {
            direction: "left"
        }, 800);
        x++;
        $("#question" + x).show("slide", {
            direction: "right"
        }, 800);
    });

});

Answer 2

这种方法不使用jQuery UI，也不同于你的，但你仍然会得到相同的最终结果。请注意，此方法中的HTML / CSS也不同。

工作示例：JSFiddle。

$(document).ready(function () {

    var x = 1,
        distance = $('.container').width(),
        qNumber  = $('.question').length;

    $('.questionList').width(distance*qNumber);

    $("input[type='radio']").change(function () {

        alert( "Radio button selection changed. Selected: " + $(this).val() );
        $('.questionList').animate({'margin-left':'-='+distance+'px'}, 500);

    });

});

jQuery show（）和hide（）不起作用

2 个答案: