Jquery and next fade in

Question

Hey guys, I have a bit of a problem that I can't solve. I'm don't know much about jquery, so i'm hoping you can help me.

Basically I have a quiz script that has questions in divs, I want when a person checks radiobox and presses "next question" button, the present div would fade out, and the next div would fade in. Here's how html code looks like:

    <div id="questions">
    <div id="question0" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_0" value="0"> 0</li>
     <li><input type="radio" name="q_0" value="2">2</li>
     <li><input type="radio" name="q_0" value="1">1</li> 
    <a href="" onclick="javascript: transition(0);">Next</a>
    </div>
    <div id="question1" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_1" value="2">2</li>
     <li><input type="radio" name="q_1" value="0">0</li>
     <li><input type="radio" name="q_1" value="1">1</li> 
   <a href="" onclick="javascript: transition(1);">Next</a>
    </div>
    <div id="question2" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_2" value="1">1</li> 
    <li><input type="radio" name="q_2" value="2">2</li> 
    <li><input type="radio" name="q_2" value="0">0</li> 
  <a href="" onclick="javascript: transition(2);">Next</a>
    </div>

Each Question Div has a unique id and the same class.

Here is some of javascript.

$('#questions').ready(function(){

    for (i = 1; i < 100; i++) {
      if ($('#question' + i).length > 0) {
            $('#question' + i).hide();

  } else {
            break;
        }

  }



});

function transition(question_id) {
    $('#question' + question_id).fadeOut('fast',function() {

           question_id++;
        if ($('#question' + question_id).length > 0) {
           $('#question' + question_id).fadeIn('fast');
        } else {
            Here will be Form submit
  }
    });
}    

The problem with this script is that after I press next, it fadesOut and FadesIn good, and then the ready function overwrites everything and again question 0 pops out. Help really appreciated.

Thank you.

Answer 1

I've changed the next links in the HTML and am hooking up all the events in the jquery document ready method.

<div id="questions">
    <div id="question0" class="question">
    <span style="verhnij">Title 1</span> 
    <li><input type="radio" name="q_0" value="0"> 0</li>
     <li><input type="radio" name="q_0" value="2">2</li>
     <li><input type="radio" name="q_0" value="1">1</li> 
    <a href="#" class="next">Next</a>
    </div>
    <div id="question1" class="question">
    <span style="verhnij">Title 2</span> 
    <li><input type="radio" name="q_1" value="2">2</li>
     <li><input type="radio" name="q_1" value="0">0</li>
     <li><input type="radio" name="q_1" value="1">1</li> 
   <a href="#" class="next">Next</a>
    </div>
    <div id="question2" class="question">
    <span style="verhnij">Title 3</span> 
    <li><input type="radio" name="q_2" value="1">1</li> 
    <li><input type="radio" name="q_2" value="2">2</li> 
    <li><input type="radio" name="q_2" value="0">0</li> 
  <a href="#" class="next">Next</a>
        </div>

And here is the jQuery stuff

$(function(){
    $('div.question').hide(); // hide all questions
    $('#question0').show(); // show first one
    $('a.next').click(function(e) { // hook up the click events
        e.preventDefault(); // prevents the link from being followed
        $(this).parent('div.question').fadeOut('fast');
        $(this).parent('div.question').next().fadeIn('fast');
    });
}); ​

You can see it all in action on this jsFiddle page I setup to work on it

Answer 2

You need to prevent the page from reloading when you click the link otherwise you restart the whole thing again : since you're using a "a" tag, you need to:

1) add # as href attribute instead of nothing (href="#").

2) return false from your transition function:

function transition(question_id) {
    $('#question' + question_id).fadeOut('fast', function() {
        question_id++;
        if ($('#question' + question_id).length > 0) {
            $('#question' + question_id).fadeIn('fast');
        } else {}
    });
    return false;
}

(sorry for the format, i just edited my post 10 times but to no avail)

Answer 3

Try changing your html to match the following:

<div id="questions">
    <div class="question" id="question1">
        <span>Title</span>
        <li><input type="radio" name="q_0" value="0"> 0</li>
        <li><input type="radio" name="q_0" value="2">2</li>
        <li><input type="radio" name="q_0" value="1">1</li>
        <a href="#" class="next">Next</a>
    </div>
    <div class="question" id="question2">
        <span>Title</span>
        <li><input type="radio" name="q_1" value="2">2</li>
        <li><input type="radio" name="q_1" value="0">0</li>
        <li><input type="radio" name="q_1" value="1">1</li>
        <a href="#" class="next">Next</a>
    </div>
    <div id="question3" class="question">
        <span>Title</span>
        <li><input type="radio" name="q_2" value="1">1</li>
        <li><input type="radio" name="q_2" value="2">2</li>
        <li><input type="radio" name="q_2" value="0">0</li>
        <a href="#" class="next">Next</a>
    </div>
</div>

And your script to this:

$(function() {
    $('div.question').hide();
    $('div.question:first').show();
    $('.next').click(function() {
        transition($(this).closest('.question'));
        return false;
    });
});

function transition($question) {
    $question.fadeOut('fast',function() {

        if ($question.attr('id') !== $('.question:last').attr('id')) {
            $question.next('.question').fadeIn('fast');
        } else {
            alert('done!');
        }
    });
}

I've removed the onclick from your links and added them via jQuery, in order to maintain the precepts of Unobtrusive Javascript.

You can view a demo here: http://jsfiddle.net/t7P45/

Answer 4

I think you're over-complicating things a bit. Try this out:

  <div id="questions">
    <div id="question0" class="question askme">
    <span style="verhnij">Title 1</span> 
    <li><input type="radio" name="q_0" value="0"> 0</li>
     <li><input type="radio" name="q_0" value="2">2</li>
     <li><input type="radio" name="q_0" value="1">1</li> 
    <a href="next">Next</a>
    </div>
    <div id="question1" class="question askme">
    <span style="verhnij">Title 2</span> 
    <li><input type="radio" name="q_1" value="2">2</li>
     <li><input type="radio" name="q_1" value="0">0</li>
     <li><input type="radio" name="q_1" value="1">1</li> 
   <a href="next">Next</a>
    </div>
    <div id="question2" class="question askme">
    <span style="verhnij">Title 3</span> 
    <li><input type="radio" name="q_2" value="1">1</li> 
    <li><input type="radio" name="q_2" value="2">2</li> 
    <li><input type="radio" name="q_2" value="0">0</li> 
  <a href="next">Next</a>
 </div>​​​​​​​

JS:

​$(function() {
    $(".question").hide();
    $(".question:first").show();

    $("a").click(function() { 
        $(this).parent(".question").removeClass("askme").hide();
        $(".askme:first").show();
        return false;
    });
});

You'll have to tweak this a bit to get the fading effect you want, but it shouldn't be very difficult. A demo.