我弄错了我的问题。我的问题是我想滑到下一个问题,我不知道我做错了什么。
当我点击按钮时,我想滑动当前问题并滑入下一个问题。
任何人都可以帮助我这个小提琴http://jsfiddle.net/7ozpqojw/3/
我在我选择的课程中使用此功能,当我点击按钮时,该课程会添加到新问题中。
简化示例:
$('body').delegate('.answer_buttons a', 'click', function (e) {
e.preventDefault();
$('.selected')
.find('input')
.val($(this).hasClass('nu') ? 'nu' : 'da')
.end()
.removeClass('selected')
.hide()
.nextAll('.question').first().show().addClass('selected');
$('.selected').animate({
"left": "-1300px"
}, "slow", 'linear');
});
body {
margin: 0;
padding: 0;
text-align: center;
}
.question_img {
margin-top: 45px;
}
.question img {
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
.content_intrebari {
width: 800px;
}
.question {
display: none;
}
.question.selected {
display: block;
}
.start_section img {
margin-top: 70px;
}
.answer_buttons {
display: inline-block;
margin: 20px 0;
}
.nu {
background: transparent url('images/nu.png') no-repeat;
margin-right: 60px;
}
.da {
background: transparent url('images/da.png') no-repeat;
}
.nu, .da {
width: 150px;
height: 50px;
display: inline-block;
float: left;
}
.content_intrebari form {
height: 300px;
width: 800px;
position: relative;
overflow: hidden;
}
.question {
position: absolute;
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="continut content_intrebari">
<div class="question_img"></div>
<form action="final.php" method="post">
<input name="intr_id" value="0" type="hidden">
<p class="question selected" id="intreb_1">
<img src="images/cone.png">
<input name="intr1" value="" type="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
<p class="question " id="intreb_2">
<img src="images/cone.png">
<input name="intr2" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p>
<p class="question " id="intreb_3">
<img src="images/cone.png">
<input name="intr3" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p>
</form>
</div>
<div class="answer_buttons">
<a class="nu" href="">No</a>
<a class="da" href="">Yes</a>
</div>
答案 0 :(得分:0)
使用
$('.selected').removeClass('selected').next().removeClass('question').addClass('selected').animate({"left": "1300px"}, "slow", 'linear');
答案 1 :(得分:0)
不是一个优雅的解决方案,但应该为你做好工作。
下面代码的一部分负责动画
var animated = 1, l = $('.question').length-1;
$('body').on('click', '.answer_buttons a', function (e) {
e.preventDefault();
var that = $(this),
nu = that.is('.nu'),
next = nu ? $('.selected').prev() : $('.selected').next();
// check whether ".selected" is last or first (or animation is in proggress), then return (do nothing):
if((nu && $('.selected').is('.question:eq(0)')) || (!nu && $('.selected').is('.question:eq('+l+')')) || !animated) return;
// proceed:
animated = 0;
$('.selected').find('input').val('da').end().animate({
left: (nu ? "1300px" : "-1300px")
}, 500, function() {
$(this).removeClass('selected');
animated = 1;
});
next.css('left', (nu ? "-1300px" : "1300px")).addClass('selected').animate({
left: "0"
},500);
// ... THE REST OF YOUR CODE ...
});