JQuery + .show()

This is a simple example of radio buttons using JQuery

JSFiddle

So what I want is to be able to slowly display the radio buttons something like this:

JSFiddle - show()

but instead of having .html here I want to slowly fade it in

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

something like

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

but i can't quite work it out. Can someone please advise?

Answers


Try this

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;
});

Demo


Try

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++;
    });

})

Demo: Fiddle


Need Your Help

RC4 Encryption/Decryption with C# and Java

java c# encryption rc4-cipher

I even use the AES algorithm to encrypt and decrypt files, but according to my research, the performance of this algorithm is slower than the RC4 algorithm in Java.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.