Not know much about css but some how got strucked in setting css property. I am using Openlayers .olControlLayerSwitcher class. Here without using !important keyword, LayerSwitcher will not get move. Here is my code:

Its working.But very fast. I want to move it with some speed intervals like jquery animate. Please suggest it.

$(".olControlLayerSwitcher").css("cssText", "top: 30px !important;"); 

$('.olControlLayerSwitcher').css("cssText", "top: 55px !important;");

First of all, OpenLayers 3 doesn't have a LayerSwitcher control. In OpenLayers 2 however, there is a .olControlLayerSwitcher style which can be animated by JQuery without any further styling options. You can use JQuery's animate function for this task:

$(".olControlLayerSwitcher").animate({top: "55px"});

There is no need for the 30px animation, except if you want to see a break between the two animations. Then you have two options. You can use two animations or you can either call a callback function in the first animation.

First option:

$(".olControlLayerSwitcher").animate({top: "30px"});
$(".olControlLayerSwitcher").animate({top: "55px"});

Second option:

$(".olControlLayerSwitcher").animate({top: "30px"}, 400, function() {
    $(".olControlLayerSwitcher").animate({top: "55px"});

In the second option the 400 is the speed of he animation. You can set it to "slow", "fast" or any value in milliseconds.

There is only one thing left. Somehow JQuery can't animate the .olControlLayerSwitcher style if the animation isn't called in the same function as the control. So if you put

map.addControl(new OpenLayers.Control.LayerSwitcher());

in a function different then the JQuery animation the animation won't work. I can't figure out why this is happening, maybe someone smarter can answer this question.

  • Nice and very descriptive answer ;) – WhiteboxDev Sep 5 '14 at 21:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.