我一直被jQuery中淡入淡出的概念所困扰

Question

我正在开发一个在线测试应用程序，并从xml文件到jsp页面。。。所有问题都使用jsp中的for循环显示。。。现在我不希望所有的问题都在一个页面上，而是希望在用户单击"下一步"按钮时逐个显示。这是我正在使用的代码只显示第一个和第二个问题，从第三个问题开始，它逐渐消失。。。而不单击"下一步"按钮。。。这里需要一些建议。。。谢谢这是代码：

$(document).ready(function(){
    var questions;      
    var counter;
    var totalQuestions;
    var currentQuestion=0;
    var i=0;                        
    totalQuestions=$("#javapaperlist").val();
    questions=$(".questions");
    questions.hide();   
    $(questions.get(currentQuestion)).fadeIn(1000); 
    $('#next').click(function(){
        $(questions.get(currentQuestion)).fadeIn(1000);
            $(questions.get(currentQuestion)).fadeOut(2000);
            currentQuestion=currentQuestion+1;
            $(questions.get(currentQuestion)).fadeIn(1000);
        });
)};

METHOD="post">

<%
    for(int i = 0; i < javapaperList.size(); i++){
        JavaPaper paper = javapaperList.get(i);
        String text = paper.getText();
        StringTokenizer tokens = new StringTokenizer(text, "##");
        int tokensint = tokens.countTokens();
%>
<div class="questions" id=<%out.println("qx" + paper.getId());%> style="display:none" > 
<%
            while(tokens.hasMoreTokens()){
            %>  
                <label class="questiontext" ><%=tokens.nextToken()%></label><br>
         <%             
            }
         %>
         <BR>
         <BR>
         <INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="A" id=<% out.println("A" + paper.getId()); %> onClick="rboc(this)" class="option">
         <% out.println(paper.getOptiona());%>
        <BR>
        <INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="B" id=<% out.println("B" + paper.getId()); %> onClick="rboc(this)" class="option">
        <% out.println(paper.getOptionb());%>
        <BR> 
        <INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="C" id=<% out.println("C" + paper.getId()); %> onClick="rboc(this)" class="option">
        <% out.println(paper.getOptionc());%>
        <BR>
         <INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="D" id=<% out.println("D" + paper.getId()); %> onClick="rboc(this)" class="option">
         <% out.println(paper.getOptiond());%>
        <BR> 
         <INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="E" id=<% out.println("E" + paper.getId()); %> onClick="rboc(this)" class="option">
         <% out.println(paper.getOptione());%>
         <br>
         <br>
        <textarea name="<%out.println("question" + paper.getId());%>" id=<% out.println("q" + paper.getId()); %>  style="display:none" onClick="clearContents(this)"><%out.println("question" + paper.getId());%></textarea>
        <br>
        <%
        if(b!=false||x==10){
            x++;
            %>
             <BR> </div>
                <input type="button" id="next" value="NEXT"  ></input>
                <BR>         
            <%
        }
      }
        %>
        <input type='hidden' value=<%out.println(javapaperList.size());%> id="javapaperlist"/>

        <input type="submit" id="submitButton" value="Submit">
    </FORM>

Answer 1

淡入、淡入、渐变的简单示例

法丹蛋白：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

淡出：

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

音量切换：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

Answer 2

在#next上单击可以将当前问题分配给一个变量并使用.next()

此外，我将使用.eq()而不是.get()，因为它阻止每次调用jQuery

$(document).ready(function(){
    var questions;      
    var counter;
    var totalQuestions;
    var currentQuestion=0;
    var i=0;                        
    totalQuestions=$("#javapaperlist").val();
    questions=$(".questions");
    questions.hide();   
    questions.eq(currentQuestion).fadeIn(1000); 
    $('#next').click(function (){
        var current = questions.eq(currentQuestion);
        current.stop().fadeOut(2000).next().fadeIn(1000);
        currentQuestion++;
    });
});

这是一把小提琴：http://jsfiddle.net/b563F/

Answer 3

你可以在淡化前一个问题后淡化下一个问题，而不是同时，你可以更改"下一个"按钮的id，它们都有相同的id，点击事件只绑定到第一个。所以你可以将id选择器更改为类选择器，试试这个：

<input type="button" name="next" value="NEXT" class="next"  >
$('.next').click(function () {
    $(questions.get(currentQuestion)).stop().fadeOut(2000, function () {
        currentQuestion = currentQuestion + 1;
        $(questions.get(currentQuestion)).fadeIn(1000);
    });
});