Javascript 滑动切换是在手风琴的末端产生摆动
创建一个手风琴-在幻灯片上-滑动的元素下面的元素似乎向下移动一个像素,然后后退,创建一个抖动效果Javascript 滑动切换是在手风琴的末端产生摆动,javascript,jquery,Javascript,Jquery,创建一个手风琴-在幻灯片上-滑动的元素下面的元素似乎向下移动一个像素,然后后退,创建一个抖动效果 $(document).ready(function() { //Promos banners rotation and accordion $(function(){ var $accordionList = $('.accordion').find('li'); var numberOfItems = $accordionList.length; var current
$(document).ready(function() {
//Promos banners rotation and accordion
$(function(){
var $accordionList = $('.accordion').find('li');
var numberOfItems = $accordionList.length;
var currentItem = 0;
// Set first item to active
$accordionList.eq(currentItem).addClass('active').find('.content').slideToggle(800, function() {});
// Loops through promos
var infiniateLoop = setInterval(function() {
if(currentItem == numberOfItems - 1){
currentItem = 0;
}
else {
currentItem++;
}
// Remove active class, if is has it, and close content
$accordionList.parent().find('li.active').removeClass('active')
.find('.content').slideToggle(800, function() {
});
// Add active class and open content
$accordionList.eq(currentItem).addClass('active').find('.content').slideToggle(800, function() {
});
}, 4000 );
// Click to show promo
$accordionList.on('click', function () {
// Stop rotation
clearInterval(infiniateLoop);
var $accordionHead = $(this);
// Remove active class, if is has it, and close content
if($accordionHead.hasClass('active')) {
// Do nothing
}
else {
$accordionHead.parent().find('li.active').removeClass('active')
.find('.content').slideToggle(800, function() {
});
// Add active class and open content
$accordionHead.addClass('active').find('.content').slideToggle(800, function() {
});
};
});
});
});
我看到一些建议,建议您确定内容分区的高度,但该站点是响应性的,因此无法正常工作。Ya,我以前遇到过这个问题。我最喜欢的修复方法是制作自己的
.slideToggle()
如果愿意,您甚至可以将其封装在原型函数中
div = $('div');
height = div.height();
width = div.width();
$('div').click( function() {
if ($(this).hasClass('hidden')) {
$(this).animate({height: "0", width: "0"}, 200).hide().addClass('hidden');
} else {
$(this).animate({height: height, width: width}, 200).show().removeClass('hidden');
}
});