Горизонтальный слайд между двумя div

Question

Горизонтальный слайд между двумя div

0

Я хотел бы создать слайд между двумя div, когда я нажимаю на ссылку.

Я пытаюсь сделать слайд следующим образом: http://jsfiddle.net/jtbowden/ykbgT/2/

Но это катастрофа: http://jsfiddle.net/Xroad/SP5Rh/

$('.slide').click(function() {

    $('.green').animate({
        left: '-50%'
    }, 500, function() {
        $('.red').css('left', '150%');
        $('.red').appendTo('#container');
    });

    $('.green').next().animate({
        left: '50%'
    }, 500);
});

Xroad 01 май 2014, в 13:29

Источник

0

Что не так с использованием вашего первого jsfiddle?
Albzi 01 май 2014, в 10:30
0

На самом деле я пытался сделать как первый jsfiddle, но с двумя div и нажатием на ссылку, а не на div
Xroad 01 май 2014, в 10:31

Теги:

jquery

css

slide

1 ответ

Ещё вопросы

Что не так с использованием вашего первого jsfiddle?
На самом деле я пытался сделать как первый jsfiddle, но с двумя div и нажатием на ссылку, а не на div

KBN · Accepted Answer · 2014-05-01T08-02-00.000Z

Это должно исправить, я немного изменил номера, чтобы исправить его для вашего размера коробки.

$('.slide').click(function() {

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

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

EDIT: Почему ваша работа не работала, по сравнению с рабочей? Вы анимировали только red или green. Кроме того, у другого есть next() который используется, но у вас не может быть этого, потому что next() для вашего анкера Slide div не то, что мы хотим здесь.

Ну, это прекрасно работает, но переполнение это шоу.
@Xroad Извините, я вас не понял. Jsfiddle выглядит хорошо, я не вижу никаких совпадений.
@xFortyFourx Спасибо за вашу помощь. Вот реальная структура моей страницы: jsfiddle.net/Xroad/SP5Rh/4 Другая особенность заключается в том, что красный div по умолчанию имеет значение «left: 150px», а зеленый div «top: -150px»
@Xroad, ты снова совершаешь ту же ошибку :). В вашем javascript замените .div-main на div .
@xFortyFourx LOL ой. Хорошо, я обновил: jsfiddle.net/Xroad/SP5Rh/4 Другая особенность заключается в том, что красный div по умолчанию имеет значение «left: 150px», а зеленый div «top: -150px»
@Xroad Я обновил скрипку, проверьте это jsfiddle.net/SP5Rh/6