Animacja - uciekający div

pytanie zadane 14 grudnia 2015 w JavaScript przez SebekMakaron Obywatel (1,290 p.)
edycja 14 grudnia 2015 przez Eimens

PLIK HTML:

<!DOCTYPE html>
<html lang ="pl">
<head>
    <title>JavaScript</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" href="style-css.css"/>
</head>
<body>
    <div id="strona">
        <div id="blok"></div>
    </div>
</body>
</html>

PLIK CSS:

body{
    background-color: #555555;
    font-size: 30px;
}

#strona{
    background-color: #657564;    
    width: 960px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
}

#blok{    
    position: absolute;
    left: 100px;
    width: 100px;
    height: 280px;
    background-color: #ff0473;
    margin-top: 100px;
}

PLIK JAVASCRIPT / JQUERY:

$(document).ready(function(){
    $("#blok").hover(
    function(){$(this).stop().animate({left: "+=60px", backgroundColor: 'rgb(255,4,115)'}, 800, "easeInSine")},
    function(){$(this).stop().animate({left: "-=60px", backgroundColor: 'rgb(110,138,195)'}, 1200)});
});

1.Przetestujcie kod z wyłączoną funkcją 'stop()'

2. Przetestujcie identyczny kod u siebie

W pierwszym przypadku animacja wykonuje się kilkakrotnie nawet po zatrzymaniu wskaźnika lecz gdy wcześniej najedziemy kilkakrotnie na div.

W drugim przypadku użyto funkcji 'stop()' i animacja wykonuje się razy cały problem tkwi w skutku ubocznym drugiego przypadku co sami zapewne zauważyliście i o rozwiązanie właśnie tego problemu proszę

1 odpowiedź

odpowiedź 14 grudnia 2015 przez writen Nałogowiec (29,060 p.)

Chcesz uzyskać pomoc to może zastosuj się do tego co jest napisane tutaj https://forum.pasja-informatyki.pl/faq oraz sam wstaw kod na jakiś codepen lub jsfiddle.