.toggle(“bounce”) making div disappear

Question

Working on a very simple point and click instrument, I'm looking to have my divs bounce in place after clicked, but for some reason they are disappearing after executing their animation. The animation should run on each .box div, which is nested inside of an #instrument div.

#instrument {
    height: 116px;
    width: 812px;
    padding-right: 10px;
    padding-top: 50px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

.box {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-top: 10px;
    float:left;
    border-radius: 5px;
}

Here is the js code:

$(document).ready(function(){
    $(".box").hover(function(){
        $(this).toggleClass('hover');
        });
    $(".box").click(function(){
        $(this).toggleClass('active');
        $(this).toggle("bounce", {times: 3}, "slow");
    });

Anything obviously wrong here? I've read that sometimes .toggle("bounce") doesn't cooperate well with margins in css, but haven't been able to tweak it to work.

Answer 1

Instead of .toggle() use .effect()

$(this).effect("bounce", {times: 3}, "slow");

.toggle() is used to toggle an element's display state - therefore it was disappearing.

 jQuery(function($) { $('#instrument .box').on('click', function() { $(this).toggleClass('active').effect('bounce', { times: 3 }, 'slow'); }); }); 

 .box { width: 100px; height: 100px; margin-left: 10px; margin-top: 10px; float: left; border-radius: 5px; background: #0bf; } .box:hover { background: #0fb } .box.active { background: #f0b } 

 <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"> <div id="instrument"> <div class="box"></div> <div class="box"></div> </div> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>