Question

I am using the brilliant UL-slide jQuery-plugin.
Usually I have no problem however now I am experience some issues:

I am making a Friday Quiz, and I want the questions to slide away when answered.
However when I click the box slides to a “inbetween-frame” and not to the next li.

Here is the my site: http://carlpapworth.com/friday-quiz/

Here is my code:

html:

  <ul id="qBox">
    <!--Q1-->           <li class="qContainer">
                            <div class="qQuestion">Question I
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    <!--Q2-->           <li class="qContainer">
                            <div class="qQuestion">Question II
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    <!--Q3-->           <li class="qContainer">
                            <div  class="qQuestion">Question III
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    </ul>

CSS:

#qBox{
width: 2000px;
height: 260px;
}

li.qContainer {
/*
position: relative;
width: 100%!important;
height: 100%!important;
padding: 0px 0px;
float: left;
border: solid 1pt;
*/
}

.qQuestion {
width: 480px;
height: 50px;
padding: 10px 0px;
font-family: corbel;
font-size: 34px;
text-align: center;
color: #ffffff;
}

.qQuestion:after {
content: url(../images/questionShadow.png);
width: 100%;
margin-top: -24px;
padding: 0 0 20px 0;
height: 2px;
display: block;
}

.qAnswers {
width: 460px;
padding: 10px;
height: auto;
text-align: center;
}

.qAnswers li {
height: 30px;
padding: 10px;
}

.qAnswers li:after {
content: url(../images/questionShadow.png);
width: 100%;
margin-top: -8px;
height: 2px;
display: block;
}

.qAnswers li a{
width: 100%;
font-family: silverfake;
font-size: 26p
}

JS:

$(document).ready(function() {
            $('#qBox').ulslide({
                    effect: {
                        type: 'slide', // slide or fade
                        axis: 'x',     // x, y
                        distance: 0   // Distance between frames
                    },
                    duration: 2000,
                    autoslide: 0,
                    width: 500,
                    height: 300,
                    mousewheel: false,
                    nextButton: '.qAnswers a',
                    prevButton: '#e1_prev'
            });
});

Answer 1

Your HTML code have some issues, look at your LI :

 <li><a href="#" class="qWrong"><h3>Answer 1</h3></li> 

Your A are not closed, I think this is your problem.