Использование Jquery для увеличения изображений при наведении курсора мыши без перемещения других

Question

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

Вот Javascript я использую:

 $('.socialmediaBar img').mouseenter(function() { 
    $(this).stop().animate({ width: "+=2%", height: "+=20%" }); 
}); 

$('.socialmediaBar img').mouseleave(function() { 
    var x = $(this).attr('width'), 
     y = $(this).attr('height'); 

    $(this).stop().animate({ width: x, height: y }); 
}); 

Это CSS:

.socialmediaBar{ 
    height:30px; 
    width: 500px; 
    margin: 0 auto; 
    margin-top:15px; 
    text-align: center; 
    padding-top:25px; 
    border: 1px solid black; 
} 

.socialmediaBar img{ 
    position: static; 
    margin-left:auto; 
    margin-right: auto; 
    display: inline-block; 
    height:30px; 
    width: auto; 
    padding-left: 10px; 
    border: 1px solid black; 
} 

.socialmediaBar a{ 
    text-decoration: none; 
} 

И это HTML:

<div class="socialmediaBar"> 

     <a href="mailto:jrossbeitzel@gmail.com"><img src="Images/Icons/envelope.png" height="30" width="30"/> </a> 
     <a href="http://www.facebook.com/ross.beitzel" target="_blank"><img src="Images/Icons/facebook.png" height="30" width="30" /> </a> 
     <a href="http://www.twitter.com/jrossbeitzel" target="_blank"><img src="Images/Icons/twitter.png" height="30" width="30" /> </a>  
     <a href="https://vimeo.com/user35376371" target="_blank"><img src="Images/Icons/Vimeo.png" height="30" width="30" /> </a> 
     <a href="https://www.linkedin.com/in/jamesrossbeitzel" target="_blank"><img src="Images/Icons/linkedin.png" height="30" width="30" /> </a> 
</div> 

Заранее спасибо за любой помогите, вы можете дать мне!

Answer 1

Вы можете установить контейнер для изображений:

<div class="container"> 
    <a href="mailto:jrossbeitzel@gmail.com"> 
     <img src="Images/Icons/envelope.png" height="30" width="30"/> 
    </a> 
</div> 

Контейнер должен иметь статическую высоту и ширину:

.socialmediaBar .container { 
    height: 50px; 
    width: 50px; 
    float: left; 
} 

Я сделал Fiddle. Это немного разбивает ваши стили панели инструментов, но не должно быть никаких проблем с ее исправлением.

Answer 2

Вы можете сделать это, установив фиксированный размер ссылок inline-block s и изображения внутри absolute.

.socialmediaBar a { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    margin-right: 18px; 
} 

.socialmediaBar img { 
    position: absolute; 
    ... 
} 

Это мой jsfiddle.

И вот мой второй jsfiddle, для восходящей анимации. Примечание: это можно сделать и с помощью css-переходов. Попробуйте удалить весь код javascript и раскомментируйте два комментария в css.