Измение толщины рамок двигает элемент

@Derick · Регистрация: 06.03.2014

Author24 — интернет-сервис помощи студентам

С помощью JS-скрипта, при наведении я меняю толщину рамки (смотреть в примере: с 1px и 5px).

HTML5

<div class="container">
  <div class="e_block">
    <div class="e_element">
      ELEMENT
    </div>
  </div>
</div>

CSS

.container {
    width: 400px;
    margin: 0 auto;
}
 
.e_element {
    border: 1px blue solid;
    text-align: center;
    width: 100px;
    position: absolute;
}

Javascript

$( document ).ready(function(){
  $('.e_element').hover(
    function() {
      $(this).animate({
        "border-width": "5px",
      }, 1000, function() {
        // Animation complete.
      })
    }, function() {
      $(this).animate({
        "border-width": "1px",
      }, 1000, function() {
        // Animation complete.
      })
    }
  );
});

http://jsfiddle.net/Feodor/864z1eyh/

Разумеется элемент меняет широту и высоту и создаётся эффект что элемент сдвинулся с позиции. Как достичь эффекта увелечения толщины рамки с условием, что бы элемент не сдвигался с позиции? Пропорционально двигать его в противоложную сторону? Есть ещё варианты?

Зарание спасибо

@Al_lord · 28.12.2014, 01:52

1) зачем писать целый js когда с такой операцией css справляется куда лучше?
2) дайте padding в 5 px

Кликните здесь для просмотра всего текста

HTML5

<style>
    .container {
    width: 400px;
    margin: 0 auto;
}
 
.e_element {
    border: 1px blue solid;
    text-align: center;
    width: 100px;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    padding: 5px;
}
.e_block
{
    position: relative;
}
.e_element:hover {
    border-width: 5px;
}
</style>
<div class="container">
  <div class="e_block">
      
    <div class="e_element">
      ELEMENT
    </div>
  </div>
</div>

@Derick · 28.12.2014, 02:43 **[ТС]**

Сообщение от Al_lord

1) зачем писать целый js когда с такой операцией css справляется куда лучше?
2) дайте padding в 5 px

Кликните здесь для просмотра всего текста

HTML5

<style>
    .container {
    width: 400px;
    margin: 0 auto;
}
 
.e_element {
    border: 1px blue solid;
    text-align: center;
    width: 100px;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    padding: 5px;
}
.e_block
{
    position: relative;
}
.e_element:hover {
    border-width: 5px;
}
</style>
<div class="container">
  <div class="e_block">
      
    <div class="e_element">
      ELEMENT
    </div>
  </div>
</div>

to Al_lord

1) согласен, чистый css всегда лучше JS-скрипта
2) padding не помог - элемент всё также "съезжает в вправо-вниз" при наведении. Тестирую под хромом.

@fol · 28.12.2014, 04:02

надо задать элементу box-sizing:border-box;

@Derick · 28.12.2014, 04:39 **[ТС]**

Снимаю шляпу: да, по ширине именно достигнут тот эффект, что мне и нужен был.

С высотой тут уже невозможно что-то поделать? (элемент съезжает вниз)

@Fedor92 · 28.12.2014, 11:10

Derick, почему border? Используйте outline и будет Вам счастье...

@Al_lord · 28.12.2014, 12:46

1) согласен, чистый css всегда лучше JS-скрипта
2) padding не помог - элемент всё также "съезжает в вправо-вниз" при наведении. Тестирую под хромом.

эй как не помог? у меня же все отработало, я вам скинул рабочий код, я тоже тестировал под хром... (ну хром это мой основной браузер) ...

@Derick · 28.12.2014, 15:34 **[ТС]**

outline классное решение, но не работает с border-radius. Я не стал тут же выкладывать комплекс проблем, но да: именно для этого задания - идеальное решение.

@Al_lord · 28.12.2014, 16:28

http://jsfiddle.net/te86f8s0/1/

HTML5

<style>
    .container {
    width: 400px;
    margin: 0 auto;
}
 
.e_element {
    border: 1px solid rgba(0,0,255,1);
    text-align: center;
    width: 100px;
    position: relative;
 
 
}
.border
{
        -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 5px solid rgba(0,0,255,0);
}
.e_block
{
    position: relative;
}
.e_element:hover .border {
    
    border: 5px solid rgba(0,0,255,1);
}
 
</style>
<div class="container">
  <div class="e_block">
  
        <div class="e_element">
          <div class="border">
            ELEMENT 
        </div>
    </div>
  </div>
</div>

Идея padinga была в том чтобы выделить место под border, но если padding не подходит, то можно воспользоватся другим элементом, который тоже будет держать место для границ

Добавлено через 15 минут
http://jsfiddle.net/te86f8s0/4/
ну или так нагляднее

HTML5

<style>
    .container {
    width: 400px;
    margin: 0 auto;
}
 
.e_element {
    border: 1px solid rgba(0,0,255,1);
    text-align: center;
    width: 98px;
    position: relative;
 
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.border
{
        -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 4px solid rgba(0,255,0,1);
}
.e_block
{
    position: relative;
}
.e_element:hover
{
    border: 5px solid rgba(0,0,255,1);
    width: 90px;
}
.e_element:hover .border {
    border: 0px solid rgba(0,0,255,1);
}
 
</style>
<div class="container">
  <div class="e_block">
  
        <div class="e_element">
          <div class="border">
            ELEMENT 
        </div>
    </div>
  </div>
</div>

Добавлено через 5 минут
Если все же надо чтобы граница появлялась без подрагиваний - то вариант 1, но там граница скорее всего выцветает.
Если все же нужно чтото на подобии 2го варианта но без подрагиваний, то это опять таки вариант 1 но с js модификацией....
Во 2м варианте элемент подрагивает, так как от одного элемента граница по одному убирается( сам элемент смещается в верх и влево) а другому элементу граница добавляться обратное смещение

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

@Derick · 28.12.2014, 16:36 **[ТС]**

Сообщение от Al_lord

Идея padinga была в том чтобы выделить место под border, но если padding не подходит, то можно воспользоватся другим элементом, который тоже будет держать место для границ

Ну теперь работает, первый код ну не работает - перепроверял. Сейчас разберу принцип и позже отпишусь.

@dimon888951 · 28.12.2014, 18:53

css лучше js? Ну не слушайте тех, кто никогда не верстал... Чем лучше? Какая аргументация? да потому что ничем, возьмите jquery, и пишите кроссбраузерно, а тот кто с css напишет кучу строк, при этом не охватит все браузеры, при этом добавит кучу невалидных хаков... Ну бред же зачем велосипед изобретать он уже есть ...

@whiteapps · 29.12.2014, 13:51

Derick, попробуйте так

CSS

.container {
    width: 400px;
    margin: 0 auto;
}
 
.e_element {
    box-shadow: 0 0 0 1px blue;
    text-align: center;
    width: 100px;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    padding: 5px;
}
.e_block
{
    position: relative;
}
.e_element:hover {
    box-shadow: 0 0 0 4px blue;
}

HTML5

<div class="container">
  <div class="e_block">
    <div class="e_element">
      ELEMENT
    </div>
  </div>
</div>

http://jsfiddle.net/864z1eyh/12/

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	28.12.2014, 04:02	4
	надо задать элементу box-sizing:border-box; 1

@Derick 3 / 3 / 5 Регистрация: 06.03.2014 Сообщений: 38
	28.12.2014, 04:39 [ТС]	5
	Снимаю шляпу: да, по ширине именно достигнут тот эффект, что мне и нужен был. С высотой тут уже невозможно что-то поделать? (элемент съезжает вниз) 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	28.12.2014, 11:10	6
	Derick, почему border? Используйте outline и будет Вам счастье... 0

@Al_lord 39 / 39 / 26 Регистрация: 11.01.2014 Сообщений: 343
	28.12.2014, 12:46	7
	1) согласен, чистый css всегда лучше JS-скрипта 2) padding не помог - элемент всё также "съезжает в вправо-вниз" при наведении. Тестирую под хромом. эй как не помог? у меня же все отработало, я вам скинул рабочий код, я тоже тестировал под хром... (ну хром это мой основной браузер) ... 0

@Derick 3 / 3 / 5 Регистрация: 06.03.2014 Сообщений: 38
	28.12.2014, 15:34 [ТС]	8
	outline классное решение, но не работает с border-radius. Я не стал тут же выкладывать комплекс проблем, но да: именно для этого задания - идеальное решение. 0

@Derick 3 / 3 / 5 Регистрация: 06.03.2014 Сообщений: 38
	28.12.2014, 16:36 [ТС]	10
	Сообщение от Al_lord Идея padinga была в том чтобы выделить место под border, но если padding не подходит, то можно воспользоватся другим элементом, который тоже будет держать место для границ Ну теперь работает, первый код ну не работает - перепроверял. Сейчас разберу принцип и позже отпишусь. 0

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	28.12.2014, 18:53	11
	css лучше js? Ну не слушайте тех, кто никогда не верстал... Чем лучше? Какая аргументация? да потому что ничем, возьмите jquery, и пишите кроссбраузерно, а тот кто с css напишет кучу строк, при этом не охватит все браузеры, при этом добавит кучу невалидных хаков... Ну бред же зачем велосипед изобретать он уже есть ... 0