Решение проблем на этом простом скрипте, который клонирует изображения в новый Div - PullRequest
Новая
       7

Решение проблем на этом простом скрипте, который клонирует изображения в новый Div

0 голосов
/ 08 марта 2012

У меня есть довольно простой скрипт, который я пытался написать, что при нажатии на элемент div он клонирует своих детей и добавляет его в новый элемент div.Довольно простой.

Я все еще новичок в javascript и jQuery, поэтому я сталкиваюсь с некоторыми проблемами, которые мешают мне получить точный результат, который я ищу.

Вот некоторые из моих проблем:

  • Когда поле щелкается, я присваиваю ему класс «выбранный».Когда щелкают по новому блоку, я хочу, чтобы предыдущий блок потерял свой класс selected, а новый блок получает этот класс selected.В основном это покажет, какая коробка выбрана.
  • При щелчке по блоку он клонирует своих детей в новый div ('#container'), а затем контейнер анимируется на высоту 500 пикселей.Когда я нажимаю на новое поле, «#container» исчезает из дочерних элементов, а затем исчезает в новых клонированных элементах.Это происходит одновременно.Как я могу сделать так, чтобы текущее содержимое исчезало, а затем появлялось новое.

Я считаю, что это две проблемы, которые у меня возникают.Я работал над этим так долго, что запутался.

Вот мой HTML: 

<div id="container">
  <a href="#" class="close">close</a><br>
</div>
<div class="boxContainer">
  <div class="box"><img src="images/places/001.jpg"></div>
  <div class="box"><img src="images/pets/002.jpg"></div>
</div>

Сценарий: 

$('.box').click(function() {
        $('#container').children('img').fadeOut();
            $(this).children().clone().fadeIn().appendTo('#container');
            $('#container').delay(100).animate({
                height: 430
            }, 500 ).addClass('opened');
        $(this).addClass('selected');
    });

    $('.close').click(function() {
        $('#container').animate({
            height: 0
        }, 500).removeClass('opened');
        $('#container').children('img').fadeOut();
    });

Я хотел бы продолжать использовать только одно изображение, которое клонируется каждый раз в '#контейнер'.

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

Я надеюсь, что кто-то может помочь, а затем объяснить, как они это сделали, если это возможно.

Вот вам скрипка: http://jsfiddle.net/ryanjay/Sbkgm/

Спасибо!

Ответы [ 2 ]

1 голос
/ 09 марта 2012

Я немного изменил ваш код и немного переместил его в функцию обратного вызова, чтобы достичь желаемого. Посмотрите на скрипку и дайте мне знать,

jsFiddle 

var $box = $('.box');
var $container = $('#container');

$box.click(function() {
    var $thisBox = $(this);

    if ($thisBox.hasClass('selected')) {
        $container.children('img').fadeOut(function() {
            $(this).remove(); //remove image after fadeout
        });

        $container.animate({
            height: 0
        }, 500, function() {
            $thisBox.removeClass('selected');
        }).removeClass('opened');
    } else {
        $box.removeClass('selected');
        $thisBox.addClass('selected');

        var $thisClone = $thisBox.find('img').clone().css('display', 'none');

        if ($container.children('img').length) {
            $container.children('img').fadeOut(function() {
                $(this).remove(); //remove image after fadeout
                $container.delay(100).animate({
                    height: 430
                }, 500, function() {
                    $(this).append($thisClone);
                    $(this).children('img').fadeIn();
                }).addClass('opened');
            });
        } else {
           $container.delay(100).animate({
                    height: 430
                }, 500, function() {
                    $(this).append($thisClone);
                    $(this).children('img').fadeIn();
                }).addClass('opened');
        }
    }
});

$('.close').click(function() {
    $container.animate({
        height: 0
    }, 500).removeClass('opened');

    $container.children('img').fadeOut(function() {
        $(this).remove(); //remove image after fadeout
    });
});
0 голосов
/ 08 марта 2012

Может быть, это то, что вы ищете? От: http://api.jquery.com/toggle/ $ ( 'Цель') переключение (). Без параметров метод .toggle () просто переключает видимость элементов:

...