Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2014, 23:43
Новичок на форуме
Отправить личное сообщение для Johnjs Посмотреть профиль Найти все сообщения от Johnjs
 
Регистрация: 12.10.2014
Сообщений: 6

Смещение элементов при .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/
Ответить с цитированием
  #2 (permalink)  
Старый 21.10.2014, 02:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,285

а без клонирования никак?
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2014, 12:47
Новичок на форуме
Отправить личное сообщение для Johnjs Посмотреть профиль Найти все сообщения от Johnjs
 
Регистрация: 12.10.2014
Сообщений: 6

Сообщение от рони Посмотреть сообщение
а без клонирования никак?
К сожалению, никак((( Так указано в задании
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2014, 12:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,285

Johnjs,
c Накурикота, вы не вместе задание получили?
Событие click в слайдере
Ответить с цитированием
  #5 (permalink)  
Старый 21.10.2014, 13:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,324

Сообщение от рони
вы не вместе задание получили?
Ответить с цитированием
  #6 (permalink)  
Старый 21.10.2014, 14:07
Новичок на форуме
Отправить личное сообщение для Johnjs Посмотреть профиль Найти все сообщения от Johnjs
 
Регистрация: 12.10.2014
Сообщений: 6

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

Последний раз редактировалось Johnjs, 21.10.2014 в 14:37.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подсветка элементов страницы при наведени anteater jQuery 4 15.11.2012 14:51
Добавление обработчика событий при добавлении элементов vladimircape Events/DOM/Window 3 13.09.2012 08:57
Проблемы в ИЕ при динамическом создании элементов Арсений Элементы интерфейса 5 20.08.2010 14:57
Добавление элементов при нажатии frolvict Общие вопросы Javascript 16 06.04.2010 18:56
Кто чем пользуется при создании html элементов vflash Общие вопросы Javascript 14 24.08.2009 20:12