Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Смещение элементов при .click() с использованием .clone() и .animate() (https://javascript.ru/forum/jquery/51015-smeshhenie-ehlementov-pri-click-s-ispolzovaniem-clone-i-animate.html)

Johnjs 21.10.2014 00:43

Смещение элементов при .click() с использованием .clone() и .animate()
 
Здравствуйте! Суть задания в следующем. Есть вот такой HTML и CSS:
<div class="garden">
    <div class="point left">&#9668;</div>
        <div class="trees">
            <div id="apple">Apple</div>
            <div id="cherry">Cherry</div>
            <div id="pear">Pear</div>
            <div id="oak">Oak</div>
            <div id="fir">Fir</div>
        </div>
    <div class="point right">&#9658;</div>
</div>


Код:

.garden { position: absolute; top: 135px; left: 150px; }
.garden > div { display:inline-block; }
.trees { width:550px; height:53px; position:relative; font-size:70%; }
.point { width: 16px; height: 15px; background: url(/point-sprite.png) no-repeat;}
.point.left  { background-position: -16px 0; }
.point:hover { background-position: 0 0; }
.point.right { background-position: -32px 0; }
.point:hover { background-position: -48px 0 }
.trees > div span { min-width:50px; position:absolute; display:inline-block; top:25px; left:15px; text-align:center; }

#apple, #cherry, #pear, #oak, #fir { position: absolute; color: #0094d9; }
#apple { top: 10px; }
#cherry { top: 2px; left: 90px; }
#pear { left: 180px; }
#oak { left: 280px; }
#fir { top: 2px; left: 373px; }

Необходимо менять позиции элементов влево при каждом событии .click() на "point left". И, соответсвенно, вправо при "point right". Если элемент имеет позицию крайнего левого и кликается по "point left",то элемент должен выезжать справа на крайнюю правую позицию. При этом мне небходимо использовать jQuery.clone() для клонирования крайних элементов. Есть следующий скрипт без использования .clone
$(document).ready(function () {
     
    function changePositionLeft() {
        
        var trees = $('#trees');
        
        trees.children().each( function(index, child) {
            if (index == 0) {
                $(child).animate(trees.children().last().position());
            }
            else {
                $(child).animate(trees.children().eq(index - 1).position());
            }
        });

        trees.children().first().appendTo(trees);        
    }

    $(".point.left").click(function() {
        changePositionLeft();
    });
});

Помогите переделать его под мои задачи с использованием .clone. Заранее спасибо
Вот линк для демонстрации: http://jsfiddle.net/8kkfw7mu/5/

рони 21.10.2014 03:38

а без клонирования никак?

Johnjs 21.10.2014 13:47

Цитата:

Сообщение от рони (Сообщение 336691)
а без клонирования никак?

К сожалению, никак((( Так указано в задании

рони 21.10.2014 13:54

Johnjs,
c Накурикота, вы не вместе задание получили?
http://javascript.ru/forum/jquery/50...slajjdere.html

ksa 21.10.2014 14:14

Цитата:

Сообщение от рони
вы не вместе задание получили?

:D

Johnjs 21.10.2014 15:07

Я не знаю, может быть да, а может и нет. Но мне это не важно. Важно разобраться в решении. (Ссылку посмотрел - вроде, не похожие задания)


Часовой пояс GMT +3, время: 08:02.