如何使我的6張圖片向外擴展jQuery？

我一直在試圖在我的網站上製作這個菜單，並且第一步是在點擊它時進行擴展。每張圖片都是獨立的，但在同一個div中。我應該如何以最好的方式做到這一點？如何使我的6張圖片向外擴展jQuery？

<script src="jquery-1.11.3.min.js"></script> 
<link rel="stylesheet" type="text/css" href="index.css"> 
<body> 
<div id="prototype"> 
<img style="height: 100px; width: 100px; position: absolute;"src="prototype1.png" alt="menu1"> 

<img style="height: 100px; width: 100px;position: absolute;" src="prototype2.png" alt="menu2"> 

<img style="height: 100px; width: 100px;position: absolute;" src="prototype3.png" alt="menu3"> 

<img style="height: 100px; width: 100px;position: absolute;" src="prototype4.png" alt="menu4"> 

<img style="height: 100px; width: 100px;position: absolute;" src="prototype5.png" alt="menu5"> 

<img style="height: 100px; width: 100px;position: absolute;" src="prototype6.png" alt="menu6"> 
</div>

我的jQuery到目前爲止

$("#prototype").one('click', function(){ 
    $(this).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).animate({ 
     'width': '+=400px', 
     'height': '+=700px'}, "slow"); 
});

然後我的CSS：

#prototype { 
    position: absolute; 
    top: 45%; 
    left: 47.5%; 
}

不幸的是，這是它的結局看起來像。

http://bthem.goerann.com/

來源

2015-11-16 Göran Kempe

嘗試'transform：scale（2）;'在其中一個圖像上，你想要類似的東西嗎？ –

@CagatayUlubay不幸的是，它只是使它反彈，正如網站上顯示的那樣。我只是希望它增長，使文本更容易看到。 –

如果你正在尋找放大/縮放您的圖像，然後將這個SO問題有所幫助？從選擇的答案

simple Jquery hover enlarge

片段：

$('#content img').hover(function() { 
    $(this).css("cursor", "pointer"); 
    $(this).toggle("scale",{ 
     percent: "90%" 
    },500); 

}, function() { 
    $(this).toggle("scale",{ 
     percent: "80%" 
    },500); 

});

更新（在響應評論）：

嘗試.animate以及規模。通過轉換來抵消感知的比例移動，以保持圖像居中。

$('#div').effect('scale'{ 
    percent:200 
},1000); 

$('#div').animate({ 
    left:100, 
    top:100 
},1000);

來源

2015-11-16 16:28:36 Whiplash450

是的，這是一個超級好的答案！不幸的是，這使得div向右擴展而不是向外擴展。我希望這個圈子能夠在各方面都變得更大。任何想法如何做到這一點？ –

@GöranKempe我用另一個建議更新了我的答案。 – Whiplash450

我可以看看你想做什麼，但我對此很陌生，它似乎沒有影響我的網站上的任何東西。 –

如何使我的6張圖片向外擴展jQuery？

回答

相關問題