Wie aktiviere ich eine Animation bei Hover

Question

Hallo Ich möchte eine Animation umschalten, wenn ich den Mauszeiger über ein bestimmtes div, und derzeit startet es, aber nicht zu stoppen. Kann jemand meinen Code einsehen und mir sagen, was ich falsch mache?

$(document).ready(function() { 
 
\t 
 
    function loopAnimate(x, y) { 
 
    $(x) 
 
     .animate({ 
 
     top: "1px", 
 
     left: "1px", 
 
     height: "290px", 
 
     width: "290px" 
 
     }, y/1.5) 
 
     .animate({ 
 
     top: "-=104px", 
 
     left: "-=104px", 
 
     height: "500px", 
 
     width: "500px" 
 
     }, y, function() { 
 
     loopAnimate(x, y); 
 
     }) 
 
    } 
 
\t 
 
\t function loopStop(x) { 
 
    $(x).stop(); 
 
\t \t 
 
\t $(x) 
 
     .css({ 
 
     top: "1px", 
 
     left: "1px", 
 
     height: "290px", 
 
     width: "290px" 
 
     }); 
 
    } 
 
\t 
 
\t 
 
\t $('#button').hover(function() { 
 
\t \t loopAnimate('.circle1', 1600) 
 
\t \t loopAnimate('.circle2', 1700) 
 
\t \t loopAnimate('.circle3', 1800) 
 
\t }, function() { 
 
\t \t loopStop('.circle1') 
 
\t \t loopStop('.circle2') 
 
\t \t loopStop('.circle3') 
 
\t }) 
 
\t 
 
\t $('.wrapper').css('top', $(window).height()/2 - 150); 
 
\t $('.wrapper').css('left', $(window).width()/2 - 150); 
 
\t 
 

 
})

body { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t background: gray; 
 
\t overflow: hidden; 
 
} 
 

 
.wrapper { 
 
\t width: 0; 
 
\t position: relative; 
 
} 
 

 
.circle1 { 
 
\t z-index: -1000; 
 
\t position: absolute; 
 
\t top: 1px; 
 
\t left: 1px; 
 
\t height: 290px; 
 
\t width: 290px; 
 
\t background: transparent; 
 
\t border: 4px #eee solid; 
 
\t border-radius: 100000000px; 
 
\t display: inline-block; 
 
} 
 

 
.circle2 { 
 
\t z-index: -1000; 
 
\t position: absolute; 
 
\t top: 1px; 
 
\t left: 1px; 
 
\t height: 290px; 
 
\t width: 290px; 
 
\t background: transparent; 
 
\t border: 4px #eee solid; 
 
\t border-radius: 100000000px; 
 
\t display: inline-block; 
 
} 
 

 
.circle3 { 
 
\t z-index: -1000; 
 
\t position: absolute; 
 
\t top: 1px; 
 
\t left: 1px; 
 
\t height: 290px; 
 
\t width: 290px; 
 
\t background: transparent; 
 
\t border: 4px #eee solid; 
 
\t border-radius: 100000000px; 
 
\t display: inline-block; 
 
} 
 

 
#button { 
 
\t position: relative; 
 
\t background: black; 
 
\t border-radius: 1000px; 
 
\t z-index: 10; 
 
\t height: 300px; 
 
\t width: 300px; 
 
\t transition: 0.33s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='wrapper'> 
 
\t <div class="circle1"></div> 
 
\t <div class="circle2"></div> 
 
\t <div class="circle3"></div> 
 
\t <div id='button'></div> 
 
</div>

ich möchte es meist glatt abrupt zu stoppen. Ich hoffe wirklich, dass mir jemand helfen kann.

BEARBEITEN: Gelöst. Geändert LoopStop auch

Funktion loopStop (x) { $ (x) .stop (wahr, falsch);

$(x) 
    .animate({ 
    top: "1px", 
    left: "1px", 
    height: "290px", 
    width: "290px" 
    }); 

}

Answer 1

Try this:

$(document).ready(function() { 
 
\t 
 
    function loopAnimate(x, y) { 
 
    $(x) 
 
     .animate({ 
 
     top: "1px", 
 
     left: "1px", 
 
     height: "290px", 
 
     width: "290px" 
 
     }, y/1.5) 
 
     .animate({ 
 
     top: "-=104px", 
 
     left: "-=104px", 
 
     height: "500px", 
 
     width: "500px" 
 
     }, y, function() { 
 
     loopAnimate(x, y); 
 
     }) 
 
    } 
 
\t 
 
\t function loopStop(x) { 
 
    x="."+x; 
 
    $(x).stop(true,false); \t \t 
 
\t $(x).css({ 
 
\t top: "1px", 
 
\t left: "1px", 
 
\t height: "290px", 
 
\t width: "290px" 
 
\t }); 
 
    } \t 
 
\t 
 
\t $('#button').mouseenter(function() { 
 
\t \t loopAnimate('.circle1', 1600) 
 
\t \t loopAnimate('.circle2', 1700) 
 
\t \t loopAnimate('.circle3', 1800) 
 
\t }); 
 
\t $('#button').mouseleave(function() { 
 
\t \t loopStop('circle1') 
 
\t \t loopStop('circle2') 
 
\t \t loopStop('circle3') 
 
\t }); 
 
\t 
 
\t $('.wrapper').css('top', $(window).height()/2 - 150); 
 
\t $('.wrapper').css('left', $(window).width()/2 - 150); 
 
\t 
 

 
});

body { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t background: gray; 
 
\t overflow: hidden; 
 
} 
 

 
.wrapper { 
 
\t width: 0; 
 
\t position: relative; 
 
} 
 

 
.circle1 { 
 
\t z-index: -1000; 
 
\t position: absolute; 
 
\t top: 1px; 
 
\t left: 1px; 
 
\t height: 290px; 
 
\t width: 290px; 
 
\t background: transparent; 
 
\t border: 4px #eee solid; 
 
\t border-radius: 100000000px; 
 
\t display: inline-block; 
 
} 
 

 
.circle2 { 
 
\t z-index: -1000; 
 
\t position: absolute; 
 
\t top: 1px; 
 
\t left: 1px; 
 
\t height: 290px; 
 
\t width: 290px; 
 
\t background: transparent; 
 
\t border: 4px #eee solid; 
 
\t border-radius: 100000000px; 
 
\t display: inline-block; 
 
} 
 

 
.circle3 { 
 
\t z-index: -1000; 
 
\t position: absolute; 
 
\t top: 1px; 
 
\t left: 1px; 
 
\t height: 290px; 
 
\t width: 290px; 
 
\t background: transparent; 
 
\t border: 4px #eee solid; 
 
\t border-radius: 100000000px; 
 
\t display: inline-block; 
 
} 
 

 
#button { 
 
\t position: relative; 
 
\t background: black; 
 
\t border-radius: 1000px; 
 
\t z-index: 10; 
 
\t height: 300px; 
 
\t width: 300px; 
 
\t transition: 0.33s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='wrapper'> 
 
\t <div class="circle1"></div> 
 
\t <div class="circle2"></div> 
 
\t <div class="circle3"></div> 
 
\t <div id='button'></div> 
 
</div>

Answer 2

Sie loopAnimate(x, y); in sich selbst als Rückruf anrufen, es nur

function loopAnimate(x, y) { 
    $(x) 
     .animate({ 
     top: "1px", 
     left: "1px", 
     height: "290px", 
     width: "290px" 
     }, y/1.5) 
     .animate({ 
     top: "-=104px", 
     left: "-=104px", 
     height: "500px", 
     width: "500px" 
     }, y) 
    } 

entfernen