После слайда сохраняйте позицию

Question

После слайда сохраняйте позицию

0

У меня есть два содержания, которые обмениваются своими позициями (зеленый и красный для примера).

Вначале зеленое содержимое смещается от 150 пикселей слева. Но после полного перехода этот контент восстанавливается слева направо на 0px. Как заставить это содержимое вернуться на 150 пикселей слева после полного хода?

Нажмите "кнопку изображения" в верхнем правом углу, чтобы увидеть: http://jsfiddle.net/Xroad/CnSEa/7/

$('#content-clients').css('left', '150%');

$('#btn-clients').click(function () {

    $("#main ul:first").animate({
        left: '-150%'
    }, 500, function () {
        $(this).css('left', '150%');
        $(this).appendTo('#main');
    });

    $('#main ul:first').next().animate({
        left: '0'
    }, 500);
});

Я НАШЕЛ ! http://jsfiddle.net/Xroad/CnSEa/19/

Xroad 01 май 2014, в 19:54

Источник

0

Это то, что вы хотите? jsfiddle.net/CnSEa/10 Вы оставили равным нулю в вашем JS.
kthornbloom 01 май 2014, в 17:59
0

Спасибо. Я пробовал это, но, к сожалению, красный контент тоже установлен на 150px и по праву не хочу. Вот почему это немного сложно. Как добавить условие, подобное этому: Если следующий контент имеет зеленый цвет (# content-scene), добавьте left: 150px, но если это красный (# content-clients) left: 0?
Xroad 01 май 2014, в 18:02

Теги:

jquery

css

2 ответа

Ещё вопросы

Это то, что вы хотите? jsfiddle.net/CnSEa/10 Вы оставили равным нулю в вашем JS.
Спасибо. Я пробовал это, но, к сожалению, красный контент тоже установлен на 150px и по праву не хочу. Вот почему это немного сложно. Как добавить условие, подобное этому: Если следующий контент имеет зеленый цвет (# content-scene), добавьте left: 150px, но если это красный (# content-clients) left: 0?

Joe Komputer · Answer 1 · 2014-05-01T16-22-00.000Z

Я думаю, вы слишком задумываетесь об этом. Просто используйте toggleClass() чтобы добавить и удалить новый класс с другой left позицией. Затем, когда вы удаляете класс, он будет использовать исходную left позицию, которую вы установили. Взгляните на эту скрипку, вы увидите, что зеленый квадрат возвращается в исходное left:150px после удаления добавленного класса, а красное поле использует его left:0.

Это отличная логика! Единственная проблема - анимация. Это уже не слайд, это своего рода обмен справа
Все, что вам нужно сделать, это немного настроить скрипку, которую я связал. Добавьте второй класс, который перемещает ul в другом направлении, затем переключите его вправо, чтобы иллюзия зациклилась. Я бы настроил это, но сейчас я обанкротился, надеюсь, логика направит вас в правильном направлении, хотя
Спасибо за вашу помощь, я нашел. Я добавляю два условия: jsfiddle.net/Xroad/CnSEa/19

ashack · Answer 2 · 2014-05-01T15-49-00.000Z

Вы просите проблему смешивания px и% в ваших анимациях. Лучше быть последовательным. Например, замените -150% на 0 - $(this).width(), замените 150% на $('#main').width() + $('#main').offset().left 0 - $(this).width().

Спасибо. Я использую%, чтобы скрыть содержимое. После этого содержимое заменяется слева: 0 функцией next (). Animate (). Я попытался поставить 150px, но оба содержимого были заменены слева на 150px, и я бы хотел, чтобы только 150pn заменялось только зеленым. Я не знаю, если я ясно, лол