ul.slide jQuery plug-in issue

Question

Я использую блестящий UL-слайд jQuery-плагин. Обычно у меня нет проблем, но теперь я испытываю некоторые проблемы:

Я делаю викторину в пятницу, и я хочу, чтобы вопросы отскакивали, когда отвечали. Тем не менее, когда я нажимаю на слайды в «промежуточный кадр», а не на следующую строку.

Вот мой сайт: http://carlpapworth.com/friday-quiz/

Вот мой код:

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

Вашего HTML кода есть некоторые проблемы, посмотрите на свой LI:

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

Ваши не закрыто, я думаю, что это ваша проблема.

Answer 2

фигура из .. вы <a> скучаю закрывающий тег ... </a>

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

попробовать в скрипку here