Форум

optron · #1 (**permalink**) 28.10.2015, 18:18

Всем добрый вечер. Помогите решить проблему с дерганьем блоков при наведении мыши.

<div id="popup">
     <div class="on">Блок #1</div>
     <div class="on">Блок #2</div>
     <div class="on">Блок #3</div>
     <div class="on">Блок #4</div>
     <div class="on">Блок #5</div>
     <div class="on">Блок #6</div>
     <div class="on">Блок #7</div>
     <div class="on">Блок #8</div>
     <div class="on">Блок #9</div>
     <div class="on">Блок #10</div>
</div>

var speed=150,
    originalHeight=30,
    hoverHeight=50;

$(".on").hover(function(){
  $(this).stop().animate({height:hoverHeight},speed);
},function(){
	$(this).stop().animate({height:originalHeight},speed);

	
	})

Рабочий пример можно посмотреть здесь - https://jsfiddle.net/7pgeodrm/
Если провести медленно курсором через все блоки, то работает более менее нормально. Но если чуть быстрее то начинает дергать все блоки. Как это можно исправить или чуть приглушить?

Decode · #2 (**permalink**) 28.10.2015, 20:07

Так?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #popup {
            width: 200px;
            border: 1px solid #999;
        }
        .on {
            border-bottom: 1px solid #999;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="popup">
    <div class="on">Блок #1</div>
    <div class="on">Блок #2</div>
    <div class="on">Блок #3</div>
    <div class="on">Блок #4</div>
    <div class="on">Блок #5</div>
    <div class="on">Блок #6</div>
    <div class="on">Блок #7</div>
    <div class="on">Блок #8</div>
    <div class="on">Блок #9</div>
    <div class="on">Блок #10</div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
    var speed = 150,
        originalHeight = 30,
        hoverHeight = 50,
        sensitivity = 0.2,
        mouseSpeed;

    function hover(event) {
        var pX = event.pageX,
            pY = event.pageY,
            pTime = Date.now();

        $(this).mousemove(function(event) {
            var cX = event.pageX,
                cY = event.pageY,
                cTime = Date.now();

            if (pTime == cTime) return;

            mouseSpeed = Math.sqrt( Math.pow(pX - cX, 2) + Math.pow(pY - cY, 2) ) / (cTime - pTime);
        });
        
        if (!mouseSpeed || mouseSpeed < sensitivity)
            $(this).stop().animate({ height: hoverHeight }, speed);
    }

    function out() {
        $(this).stop().animate({ height: originalHeight }, speed);
    }

    $(".on").hover(hover, out);
</script>
</body>
</html>

рони · #3 (**permalink**) 28.10.2015, 22:24

optron,

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #popup {
            width: 200px;
            border: 1px solid #999;
        }
        .on {
            border-bottom: 1px solid #999;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="popup">
    <div class="on">Блок #1</div>
    <div class="on">Блок #2</div>
    <div class="on">Блок #3</div>
    <div class="on">Блок #4</div>
    <div class="on">Блок #5</div>
    <div class="on">Блок #6</div>
    <div class="on">Блок #7</div>
    <div class="on">Блок #8</div>
    <div class="on">Блок #9</div>
    <div class="on">Блок #10</div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
    var speedto = 600,speedout = 300,
        originalHeight = 30,
        hoverHeight = 50,
        pause = 350;

    function to() {
        $(this).stop().delay(pause).animate({ height: hoverHeight }, speedto);
    }

    function out() {
        $(this).stop(true,true).animate({ height: originalHeight }, speedout);
    }

    $(".on").on({mouseenter : to, mouseleave : out});
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript