Рандомный отступ в радиусе 100px

@Николай16 · Регистрация: 13.12.2015

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

Как сделать при наведение рандомный отступ в радиусе 100px, а также
Что бы при повторном наведении мыши была анимация...

HTML5
1
    <div class="box"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
    .box {
        margin: 100px 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background-color: #777;
        border-radius: 2px;
        border: 1px solid #999;
    }

JavaScript
1
2
3
4
5
6
7
8
9
10
        var box=$('.box');
 
        box.mouseover(function call() {
            box.animate({
                margin: '20px'
            }, 900,
            function mycallbackAnimate() {
                box.css('margin', '').css('transition', '.3s');
            });
        });

@msheal · 07.12.2017, 01:26

Вот так?
https://codepen.io/msheal/pen/XzwEXJ

HTML5
1
2
<div class="boxWrap">
  <div class="box"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
 .box {
        margin: 100px 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background-color: #777;
        border-radius: 2px;
        border: 1px solid #999;
   transition: margin .3s;
    }

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 var box=$('.box');
 
 box.hover(function(){
  //mousein
  var min = 2;
  var max = 100;
  var margin = Math.floor(Math.random() * (max - min + 1)) + min;
  $(this).css('margin', margin + 'px');
}, function(){
  //mouseout. Remove this function if dont need it
    console.log('Good')
   
   
  box.mouseout(function(event) {
    console.log('Bad')
    box.css('margin', '');
    
  });
});

@Николай16 · 07.12.2017, 01:36 **[ТС]**

а он на своё место потом не летит

@msheal · 07.12.2017, 01:47

в методе есть второй аргумент, срабатывающий при уходе мыши. Скорее всего он не подойдет, но на всякий случай оставлю:

JavaScript
1
2
3
4
5
6
7
8
9
10
$('.box').hover(function(){
  //mousein
  var min = 0;
  var max = 100;
  var margin = Math.floor(Math.random() * (max - min + 1)) + min;
  $(this).css('margin', margin + 'px');
}, function(){
  //mouseout
   $(this).css('margin', '100px 80px');
})

@Николай16 · 07.12.2017, 01:51 **[ТС]**

Спасибо и прошу прощения за мою тупость, пока Вы писали я уже сам додумал =0
Я вообще так доделал)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
        
        var box=$('.box').hover(function(){
  //mousein
  var min = 2;
  var max = 100;
  var margin = Math.floor(Math.random() * (max - min + 1)) + min;
  $(this).css('margin', margin + 'px');
}, function(){
  //mouseout. Remove this function if dont need it
  $(box).mouseout(function(event) {
    $(box).css('margin', '');
  });
});

@msheal · 07.12.2017, 02:05

Ваше решение с багом. Обновил пен. Посмотрите в браузерную консоль, поймете в чем баг. Если вкратце - вы бесконечно ставите обработчики на mouseout.

П.С. оборачивать box в $(box) не нужно - в переменной уже обернутый блок

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Николай16 25 / 9 / 8 Регистрация: 13.12.2015 Сообщений: 484
	07.12.2017, 01:36 [ТС]
	а он на своё место потом не летит 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	07.12.2017, 02:05
	Ваше решение с багом. Обновил пен. Посмотрите в браузерную консоль, поймете в чем баг. Если вкратце - вы бесконечно ставите обработчики на mouseout. П.С. оборачивать box в $(box) не нужно - в переменной уже обернутый блок 1

Рандомный отступ в радиусе 100px

Решение