jQuery的動畫推動下面的div滑動前

我正在使用一些jquery來滑動圖例旁邊的地圖。我以前使用過這個代碼，但現在我在響應式框架中使用它，所以我將某些事情改爲百分比而不是像素寬度。也許我在我的腳本中有一些亂七八糟的東西，但包含圖例的div會在地圖下方下移，而它會來回移動。jQuery的動畫推動下面的div滑動前

這裏是我的腳本：

$(".hideLegendRight").click(function() { 
    $(this).hide(); 
    $(".label").hide(); 
    $(".zoomTo").hide(); 
    $(".legendMenu").hide(); 
    $("#legendMap").animate({ 
     width: "0%" 
    }, 500); 
    $(".buttonsMap").animate({ 
     left: "25" 
    }, 500); 
    $("#wrapperMap").animate({ 
     width: "100%" 
    }, 500, function() { 
     $(".showLegendRight").show(); 
    }); 
    google.maps.event.trigger(map, 'resize'); 
}); 

$(".showLegendRight").click(function() { 
    $(this).hide(); 
    $(".buttonsMap").animate({ 
     left: "0" 
    }, 500); 
    $("#legendMap").animate({ 
     width: "35%" 
    }, 500); 
    $("#wrapperMap").animate({ 
     width: "65%" 
    }, 500, function() { 
     $(".hideLegendRight").show(); 
     $(".legendMenu").show(); 
     $(".zoomTo").show(); 
     $(".label").show(); 
    }); 
    google.maps.event.trigger(map, 'resize'); 
});

And here's my jsfiddle

來源

2014-03-19 tyler_lisa

在小提琴點擊做出更大的地圖看動畫 –

你所看到的，因爲造型如何HTML工作的這個問題。你不會僅僅通過改變一些腳本值來解決這個問題。從字面上看，你的問題是，隨着#wrapperMap div的增長，它沒有留下足夠的空間讓你顯示#legendMap div。不僅如此，而且一切都自動默認爲相對位置。因此，當#wrapperMap增長時，它會取代#legendMap，使其位於其下方。這是一個很好的StackOverflow答案，概述了您的問題。

Make div stay in top of parent

差不多要進行相對家長和孩子絕對有一對夫婦的細微之處，使其在正確的位置顯示。這裏是我添加或修改來解決你的問題的CSS。

.grid_12 { 
    position: relative; 
} 

#legendMap { 
    position: absolute; 
    top:  0px; 
    right:  0px; 
    width:  35%; 
    float:right; 
    height:458px; 
    background-color:#404040; 
    z-index: -1; 
    margin-bottom:20px; 
    overflow:hidden;

}

fixed JSfiddle

來源

2014-03-19 21:19:35

感謝@DeepThought。我會給你的解決方案一個旋轉...... –

是的，這工作......謝謝@DeepThought –

jQuery的動畫推動下面的div滑動前

回答

相關問題