jQuery append image to div animate

Question

Я думаю, что этот вопрос лучше всего объяснить, предоставив вам jsFiddle. В этом примере, когда пользователь нажимает на элементы галереи, изображение добавляется в div с помощью id="showimage". То, что я не могу понять, как это сделать, - это пройти в параметре щелкнутого изображения и отобразить это изображение вместо абсолютного.

Он должен функционировать следующим образом:

• Если изображение 1 нажата, изображение 1 должно быть добавлено в showimage. Он должен анимироваться от ширины 0px до ширины 10% от родительского div.
• Если изображение 1 нажата снова, он должен свернуть: он должен анимировать от ширины 100% к ширине 0px
• Если какой-либо другой IMG нажата в то время как уже существует образ в showimage, изображение уже внутри должен свернуть, и новый расширить на своем месте

Я думаю, что это будет лучше всего достигается с помощью 3-х функций:

1. Expand - добавлять к showimage и анимировать от 0px до 100%
2. Collapse - анимировать от 100% до 0px и удалить из showimage
3. Заменить - вызвать коллапс на изображение уже в showimage и вызвать расширение на изображение щелкнул

Спасибо заранее, любая помощь будет много оценили.

Answer 1

мне удалось решить эту проблему, и вы можете увидеть живой пример jsFiddle here.

Я сохранил код действительно аккуратным для этого - 3 отдельных функции и 1 оператор if, чтобы проверить, имеет ли showimage div содержимое.

JQuery я был следующим:

var add_image = function(clicked) { 
    var image_create = '<img src="' + clicked + '">'; 
    $('#showimage').hide().append(image_create).slideDown(400); 
}; 

var change_image = function(clicked) { 
    $('#showimage img').slideUp(400, function() { 
     $(this).remove(); 
     add_image(clicked); 
    }); 
}; 

var remove_image = function() { 
    $('#showimage img').slideUp(400, function() { 
     $(this).remove(); 
    }); 
}; 

$('.gallery').click(function() { 
    var len = $('#showimage').children().length; 
    var clicked = $("img", this).attr('src'); 
    if (len === 0) { 
     add_image(clicked); 
    } else if (len === 1) { 
     change_image(clicked); 
    } 
}); 

$('#showimage').click(function() { 
    remove_image(); 
});​ 

Answer 2

здесь я раздвоенный вашу скрипку и сделал его работу, как вы хотите

http://jsfiddle.net/6vVUS/5/

Answer 3

Без анимации на месте. Ваш код должен выглядеть примерно так.

$(document).ready(function() { 

    $('div.gallery').click(function (event) { 

     var len = $('#showimage').find('img').length; 
     var myimage = '<img src="http://s3images.coroflot.com/user_files/individual_files/302239_CauyLQoHZTkSJkkGnr3kVbFtw.jpg">'; 

     if (len === 0) { 
      appendImage(); 

     } 
     else { 

      $('div#showimage').empty(); 
      appendImage(); 
     } 

    }); 

    function appendImage() { 

     $('div#showimage').append(myimage); 
     // your animation here 
    } 
});​