java - 我对 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);

        });
)};

方法=“帖子”>

<%

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