Jquery - анимация скользящего эффекта - PullRequest
Новая
       10

Jquery - анимация скользящего эффекта

1 голос
/ 11 октября 2011

Вот функция javascript, в которой я пытаюсь вызвать скользящий эффект.

Я хочу, чтобы при нажатии правой кнопки (кнопка зеленого цвета) скользящий эффект должен был заменить вкладку надругая вкладка, все это блочные элементы.

Однако эффект не работает, и я уверен, что я делаю что-то не так с кодом jquery.(Эффект затухания отлично работает на левой кнопке (оранжевая кнопка). 

    function activateRightTab()
{
    var eTabIndDiv = document.getElementById ("feature_tabs_indicators").children[0];
    var iIndsCount = eTabIndDiv.childNodes[1].children.length;
    var direction = "right";
    if (iActiveNo < iTabsCount - 1 && iActiveNo >= 0)
    {
        iActiveNo = iActiveNo + 1;
        if (iActiveNo != 1 || iActiveNo != 0)
        {
            $(eTabsDiv.children[iActiveNo - 1]).stop() .animate({"left" : "300px"}, 500);
            eTabsDiv.children[iActiveNo - 1].style.display = "none";
            eTabIndDiv.children[iActiveNo - 1].style.backgroundColor = "rgb(122,121,198)";            
        }
        **$(eTabsDiv.children[iActiveNo]).stop() .animate({"left" : "300px"}, 500);**
        eTabsDiv.children[iActiveNo].style.display = "block";
        eTabIndDiv.children[iActiveNo].style.backgroundColor = "rgb(0,100,200)";        
    }
    activateFeaturesContainer(direction);
    return iActiveNo;
}

Вот полный код (довольно длинный), но он дает представление о том эффекте, которого я пытаюсь достичь.*

Jsfiddle

Ответы [ 2 ]

1 голос
/ 11 октября 2011

Похоже, что вы действительно пытаетесь сделать, это создать div, расположенный между левой и правой кнопками, внутри которого есть 5 тегов li, которые расположены в горизонтальном ряду, а затем переместить их, как карусель влевои вправо, когда пользователь нажимает левую и правую кнопки.

К сожалению, если вы используете DOM Inspector в любом браузере, вы увидите, что, как вы собрали свой CSS, теги 5 li действительно запускаются ввертикальный столбец, в результате чего код немного сходит с ума.

Я бы поместил div вокруг вкладок ul id = и установил его точно равным ширине, занимаемой вкладками, и переполнение: скрытое.Затем я сделал бы ul внутри шириной 5 элементов и сдвигал его свойство left на ширину одной вкладки при каждом нажатии левой или правой кнопки.

Вы также можете взглянуть на источникдля этого: http://www.baijs.nl/tinycarousel/ (вверху справа, «Источник») или используйте его для анимации.

1 голос
/ 11 октября 2011

Я думаю, что вы хотите что-то вроде этого: http://www.apple.com/macbookair/

Для этого сначала нужно указать div#features overflow: hidden, в противном случае содержимое не будет скрыто при перемещении налево / входе справа.

Затем вам нужно расположить новый ul сразу за пределами видимой области и сделать его видимым, в противном случае новый контент не появится справа (при условии, что это то, что вы хотите). В вашем случае вы должны установить left: 292; display: block. Теперь вы выбираете старый и новый ul и применяете анимацию left: '-=292px'. Затем вы прячете старый. Это должно примерно сделать это. 

var jNew = $(eTabsDiv.children[iActiveNo]);
var jOld = $(eTabsDiv.children[iActiveNo-1]);
jNew.css({
   'left': 292,
   'display': 'block'
});
jNew.add(jOld).stop(true).animate({
   'left': '-=292px'
}, function() {
   jOld.hide();
});

Примечания:

  • Из-за overflow: hidden вам необходимо установить четко определенную высоту. height: auto больше не имеет значения, так как div больше не растет с его содержанием. В идеале вы должны настроить высоту с помощью JS для его дочерних элементов.

  • Я работаю со статическими значениями в вашем коде, чтобы сделать простое объяснение. Если div#features когда-либо изменит ширину, вы должны также изменить это в коде. Для лучшего обслуживания я бы предложил, чтобы вы получили ширину div#features с .outerWidth() и основали анимацию на этом значении

...