0

当我网站上的用户决定一个接一个地快速单击按钮时，我遇到了一些动画问题。所以如果我按下 btn2 然后 btn1 快速 btn2 动画发生 btn1 看起来按下但动画没有发生。会是什么呢？

HTML： 

<div id="grid-container" class="is-active">
    <div id="pager"></div>
    <div id="myGrid" style="height:500px;"><img src="<?php echo bloginfo( 'stylesheet_directory' ) . "/images/loading.gif"; ?>"/></div>
</div><!-- grid-container -->
<div id="chart-wrapper">
     <div class='arrow-right'></div>
     <div id='sel-msg'> 
          <h3>Hey there!</h3>
          <p>There's no graph here yet because we don't know what fields you'd like to see plotted.</p>
          <p>Please <strong>use the menu on the left</strong> and a graph will automatically appear.</p>
     </div>
     <div id="data-chart"></div>                
     </div><!-- graph-container -->
<div id="map-wrapper"></div>
<!-- map-container gets appended dynamically -->

CSS： 

#grid-container{
    overflow: hidden;
    min-height: 100%;   
}

#chart-wrapper{
    overflow: hidden;
    background-color: red;
    width: 100%;
    display: none;
    min-height: 500px;
}

#map-wrapper{
    overflow: hidden;
    display: none;
    width: 100%;
}

#map-container{
    overflow: hidden;
    position: relative;
    height: 500px;
    width: 100%;
}

查询： 

$('.btn').on('click',function(e){
        var active = $('#content-container').find('div.is-active').attr('id');
        var old_btn = $('#top-btn-group').find('a.btn-active').attr('id');
        var pressed = $(this).attr('id');

        $('#'+old_btn).removeClass('btn-active');
        $('#'+pressed).addClass('btn-active');

        $('#'+active).removeClass('is-active');
        //console.log(active);

        //hide active container
        $('#content-controls-container > div > div:visible').slideUp(300);

        $('#'+active).slideUp(300,function(){
            //remove the map container to allow a redraw of the map         
            if($('#map-container').length){
                $('#map-container').remove();

            }
            if(pressed == 'grid-btn'){              
                $('#grid-container').addClass('is-active');         
                $('#grid-container').slideDown(300);                                    
            }                       
            if(pressed == 'graph-btn'){
                $('#chart-wrapper').addClass('is-active');
                /*if($('#sel-msg, .arrow-right').length){
                    $('#sel-msg, .arrow-right').slideDown(500);                 
                }*/                                     
                $('#chart-wrapper').slideDown(500);                                 
                $('#chart-controls-wrapper').slideDown(300);                            
            }   
            if(pressed == 'map-btn'){
                if(!$('#map-container').length){
                    $('#map-wrapper').addClass('is-active');
                    $('#map-wrapper').append($('<div>').attr({id:"map-container"}));        
                    $('#map-controls-wrapper').slideDown(300);  
                    $('#map-wrapper').slideDown(300, function(){doMap();});
                }           
            }       
        });
        console.log(old_btn);
        console.log(pressed);
});

谢谢

4

0 回答 0