[英]fade two or more divs one by one after clicking a button
我想淡出第一个div,然后淡入下一个div。
如果我单击第二个div按钮,则第二个div应该淡出,第三个div应该淡入。
我尝试这个JS:
$(function () {
var fragen_gesamt = $('.dmd-container-frage').length;
$('.dmd-container-frage').hide();
$('.dmd-container-frage:first-child').show();
$('.btn').on('click', function () {
$('.dmd-container-frage:first-child').fadeOut(500, function () {
$(this).next('.dmd-container-frage').fadeIn(1000);
});
});
});
但是,它仅在第二个div上消失。
您需要在单击功能中更改选择器。 现在,您找到第一个块,然后淡入淡出(第二个),您需要找到被单击按钮的父级,然后根据此元素执行其余的逻辑:
$(function() {
var fragen_gesamt = $('.dmd-container-frage').length;
$('.dmd-container-frage').hide();
$('.dmd-container-frage:first-child').show();
$('.btn').on('click', function() {
$(this).closest('.dmd-container-frage').fadeOut(500, function() {
var $el = $(this).next('.dmd-container-frage');
// Check if there is next element
if ($el.length) {
$(this).next('.dmd-container-frage').fadeIn(1000);
} else {
alert('done!')
}
});
});
});
看看这个小提琴- 小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.