Суть проблемы в том, что на сайте есть
вот такая штука на главной странице.
Половинки свитеров меняются следующим кодом ( не плеваться на код, достался в наследство почти):
jQuery(document).ready(function($) {
// определим переменные и их начальное значение
var lcolor = 3 , rcolor = 50, leftTextColor, rightTextColor;
function leftSwitch() {
if (lcolor>5) {lcolor=0};
lcolor = lcolor+1;
// Цвет текста
if (lcolor== 1) {leftTextColor="#B69481"};
if (lcolor== 2) {leftTextColor="#3763A1"};
...
$('.lhalf').css('background-image', 'url(http://sheepontheship.ru/wp-content/themes/sheeponsheep/img/halfs/'+lcolor+'.png)');
$('.left-text').css('color', leftTextColor);
}
function rightSwitch() {
if (rcolor>50) {rcolor=0};
rcolor = rcolor+10;
// Цвет текста
if (rcolor== 10) {rightTextColor="#B69481"};
if (rcolor== 20) {rightTextColor="#3763A1"};
...
// Установим значения
$('.rhalf').css('background-image', 'url(http://sheepontheship.ru/wp-content/themes/sheeponsheep/img/halfs/'+rcolor+'.png)');
$('.right-text').css('color', rightTextColor);
setTimeout(leftSwitch, 3000);
}
setInterval(rightSwitch, 6000) // правая половинка
});
Вроде бы и работает, но если посмотреть подольше - меняется иногда рывками, такое же наблюдается и при быстрых кликах на половинки в
конструкторе.
Добавлял половинкам transition:
.lhalf {
float: left;
width: 287px;
min-height: 522px;
background: transparent url(img/halfs/3.png) top left no-repeat;
background-size: contain;
z-index: 8;
-webkit-transition: all .7s;
-moz-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;
}
.rhalf {
float: left;
width: 342px;
min-height: 522px;
background: transparent url(img/halfs/50.png) top right no-repeat;
background-size: contain;
margin-left: -56px;
z-index: 10;
-webkit-transition: all .7s;
-moz-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;
}
Не хватает знаний, чтобы понять где трабла. Спасайте, коллеги!
