How do I make my 6 pictures expand outwards with jQuery?

Question

I've been trying to make this menu on my website, and the first step is making it expanding when clicking it. Every picture is separate but in the same div. How should I do this in the best way?

<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>

My jQuery so far

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

And then my CSS:

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

Unfortunately this is how it ends up looking like.

http://bthem.goerann.com/

Try `transform: scale(2);` on one of the images, do you want something like that? — Cagatay Ulubay, Nov 16 '15 at 16:28
@CagatayUlubay Unfortunately that just makes it bounce around, as shown on the website right now. I just want it to grow, making the text easier to see. — Göran Kempe, Nov 16 '15 at 16:30

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

If you're looking to enlarge/scale your images then would this SO question be helpful?

simple Jquery hover enlarge

snippet from chosen answer:

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

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

});

Update (in response to comment):

Try .animate as well as scale. Offset the perceived scale movement with a transition to keep the image centered.

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

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

edited May 23 '17 at 11:44

Community

1
1

answered Nov 16 '15 at 16:28

Whiplash450

943
2
12
22

Yes that is a super good answer! Unfortunately this makes the div expand down to the right instead of outwards. I want the circle to grow bigger on all sides. Any idea on how to do that? – Göran Kempe Nov 16 '15 at 16:35
@Göran Kempe I have updated my answer with an alternative suggestion. – Whiplash450 Nov 16 '15 at 16:44
I can kind of see what you're trying to do, but I'm very new to this and it doesn't seem to effect anything on my website. – Göran Kempe Nov 16 '15 at 16:52
OK give me a minute I'm trying to set a JSFiddle to demonstrate :) – Whiplash450 Nov 16 '15 at 16:53
This is a JSFiddle code I've used before, but when trying the exact same thing right now doesn't work. Not quite sure why. http://jsfiddle.net/2vVpt/182/ It doesn't blink, nor does it get bigger. The only variable working are the "top" and "left" ones. – Göran Kempe Nov 16 '15 at 16:54
@Göran Kempe sorry I can't get the fiddle to behave as I'd like it. The scale just doesn't stop and keeps on going until the image disappears :( But you definitely will want to do a combination of scaling and animating to increase the image size but keep it's position constant. Good Luck! – Whiplash450 Nov 16 '15 at 17:27

How do I make my 6 pictures expand outwards with jQuery?

1 Answers1