jQuery將圖像附加到div動畫

Question

我認爲這個問題最好通過給你一個jsFiddle來解釋。在該示例中，當用戶點擊圖庫項目時，圖像被附加到id="showimage"的div。我無法解決的方法是傳入點擊圖像的參數，並顯示該圖像而不是絕對圖像。

應該功能如下：

• 如果圖像1被點擊時，圖像1應附加到showimage。 它應該從父div的寬度0px到寬度10％進行動畫處理。
• 如果圖像1再次點擊後，它應合攏：它應該從寬度100％動畫 與寬度0像素
• 如果點擊任何其他IMG而已經存在showimage的圖像，所述圖像已經內部應合攏，而新的在其位擴展

我認爲這將通過3個功能來完成最好：

1. 展開 - 追加到showimage和動畫0px到100％
2. 崩潰 - 從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 
    } 
});​