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;

$("#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 2

Пытаться

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 3

Я не знаю, является ли это лучшим решением, но оно работает. Просто скройте элемент и покажите его снова и снова.

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

Answer 4

Не уверен, что это то, что вы ищете:

Изменен промежуток, чтобы изначально быть display: none

<span id="answer" style="display: none">possible answers will go here...</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 здесь