jquery - jQuery + .show()

Question

这是一个使用 JQuery 的单选按钮的简单示例

JSFiddle

所以我想要的是能够慢慢显示像这样的单选按钮：

JSFiddle - 显示（）

但我不想在这里有.html，我想慢慢淡入

$("#answer").html(answers);

就像是

$("#answer").show('slow');

但我不能完全解决。有人可以建议吗？

Answer 1

尝试

var allButtons = [["Milk", "Butter", "Cheese"],["Water", "Beer", "Wine"]];
var index=0;

function displayOption($ct, array, index){
    if(array.length <= index){
        return;
    }

    var opt = array[index];
    $('<div/>').append('<input type="radio" name="group1' + '" value="' + opt + '">' + opt).hide().appendTo($ct).fadeIn(function(){
        displayOption($ct, array, index + 1);
    });

}

jQuery(function($){
    $("#nextbutton").on("click", function () {
        var $answers = $("#answer");

        $answers.empty();

        displayOption($answers, allButtons[index], 0);
        index++;
    });

})

演示：小提琴

Answer 2

尝试这个

var allButtons = [["Milk", "Butter", "Cheese"],["Water", "Beer", "Wine"]];
var index=0;

$("#nextbutton").on("click", function () {

    var answers = '';
    $(allButtons[index]).each(function (i) {
        answers += '<input type="radio" name="group1' + '" value="' + allButtons[index][i] + '">' + allButtons[index][i] + '<br>'
    });

    answers=answers+"index = " + index;
    $("#answer").hide();
    $("#answer").html(answers);
    $("#answer").show('slow')


    index+=1;
});

演示

Answer 3

不确定这是否是您要查找的内容：

将跨度修改为最初为display: none

<span id="answer" style="display: none">possible answers will go here...</span>

然后，在 click 处理程序中，保留当前逻辑，最后在 span 上调用 .show(...) ：

$("#nextbutton").on("click", function () {

    var answers = '';
    $(allButtons[index]).each(function (i) {
        answers += '<input type="radio" name="group1' + '" value="' + allButtons[index][i] + '">' + allButtons[index][i] + '<br>'
    });

    answers = answers + "index = " + index;

    $("#answer").html(answers);
    $("#answer").show('slow');
    index += 1;
});

jsFiddle在这里

Answer 4

我不知道这是否是最好的解决方案，但它确实有效。只需隐藏元素，然后一次性再次显示。

$("#answer").hide().html(answers).show('slow');

JSFiddle 的完整代码

var allButtons = [["Milk", "Butter", "Cheese"],["Water", "Beer", "Wine"]];
var index=0;

$("#nextbutton").on("click", function () {

    var answers = '';
    $(allButtons[index]).each(function (i) {
        answers += '<input type="radio" name="group1' + '" value="' + allButtons[index][i] + '">' + allButtons[index][i] + '<br>'
    });

    answers=answers+"index = " + index;

    $("#answer").hide().html(answers).show('slow');

    index+=1;
});