javascript - 条形图不断增长(Bar chart keeps growing in height)

Question

I made a bar graph with some divs.

(我做了一些股利的条形图。)

Now I'm trying to get that when you hover one of the bars, it grows in height.

(现在，我试图让您将鼠标悬停在其中一根杠上时，它的高度会增加。)

I got this part working, but my problem is that when I hover it a few times it keeps on growing and doesn't go back to the original height I set.

(我已经使这部分工作了，但是我的问题是，当我将它悬停几次后，它会继续增长，并且不会回到我设置的原始高度。)

How do I fix this?

(我该如何解决？)

css:

(CSS：)

@keyframes grow-column {0% {transform: translateY(100%);} 100% {transform: translateY(0);}}

.chart {
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.bars {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 4px solid #bab3b3;
}
.bar {
    flex: 1;
    border-bottom: none;
    margin: 0 5px;
    animation: grow-column 3s;
    background-color: red;
}

html:

(的HTML：)

<div class="chart">
    <div class="bars">
        <div class="bar" style="height:32%;"></div>
        <div class="bar" style="height:42%;"></div>
        <div class="bar" style="height:47%;"></div>
        <div class="bar" style="height:51%;"></div>
        <div class="bar" style="height:53%;"></div>
        <div class="bar" style="height:56%;"></div>
        <div class="bar" style="height:58%;"></div>
        <div class="bar" style="height:67%;"></div>
        <div class="bar" style="height:76%;"></div>
        <div class="bar" style="height:76%;"></div>
        <div class="bar" style="height:82%;"></div>
        <div class="bar" style="height:84%;"></div>
        <div class="bar" style="height:86%;"></div>
        <div class="bar" style="height:94%;"></div>
    </div>
</div>

javascript:

(javascript：)

$(".bar").on('mouseover', function() {
    var height = calculateHeight($(this), 10);
    $(this).attr('original', $(this).height());

    $(this).animate({height: height + "px"}, 250);
}).on('mouseleave', function() {
    var height = $(this).attr('original');
    $(this).attr('original', null); // deze kan weg
    $(this).animate({height: height + "px"}, 250);
});

function calculateHeight(element, amount) {
    var parentHeight = element.parent().height();
    var height = element.height() + amount;
    return (parentHeight < height) ? parentHeight : height;
}

  ask by hlbrock translate from so

Answer 1

等待大神答复