1

我正在努力将旧问题向左滑动，新问题从右侧滑入。你可以在这个 jsFiddle 中看到我在做什么：

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 编辑。它在那里工作，但不在那个环境之外。

4

2 回答 2

4

在 DOM 就绪事件中绑定事件

如果您检查 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);
    });

});
于 2013-05-30T20:28:17.540 回答
0

这种方法不使用 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);

    });

});
于 2013-05-30T23:12:48.667 回答