CODEWITHSUNDEEP
jqueryjquery-ui
tyler_lisa
tyler_lisa

Reputation: 425

Using jquery, Need to hide a div and animate the width of another div at the same time

I'm creating a page with a google map embed and legend to the right. When a "hide legend" button is clicked, I would like to hide the legend div and grow the width of the map div from 720 pixels to fill the page width (1000px).

I'm also then hiding the "hide legend" button and showing a "show legend" button.

It basically works but the map div flashes and doesn't animate smoothly. It starts as 720 pixels; the legend slides over nice and smooth, and then the mp div appears filling the page at 1000 pixels.

This is driving me crazy...and I have searched and can't find my exact circumstances. Thanks in advance for any pointers.

Here's my jquery:

<script>
$(document).ready(function() {

$(".hideLegend").click(function () {
   $(this).hide(); 
   $("#legend").hide("slide", { direction: "left" }, 500);
   $("#map").animate({ width: "1000"}, 500); 
   $(".showLegend").show(); 


});

  });
  </script>

Upvotes: 1

Views: 718

Answers (1)

Mathew Thompson
Mathew Thompson

Reputation: 56429

hide and animate take a function to be executed on animation completion. Use that to start the next animation, then after that's finished, perform the show. Something like:

$("#legend").hide("slide", { direction: "left" }, 500, function () {
    $("#map").animate({ width: "1000"}, 500, function () {
        $(".showLegend").show();
    });
});

EDIT: From comments, combined with your Fiddle, this produces the desired results:

$(".hideLegend").click(function () {
    $(this).hide(); 
    $("#legend").animate({ width: "0"}, 500);
    $("#map").animate({ width: "1000"}, 500, function () {
       $(".showLegend").show();
       $("#tabs").hide();
    });
});

$(".showLegend").click(function () {
    $(this).hide(); 
    $("#tabs").show();
    $("#legend").animate({ width: "280" }, 500);
    $("#map").animate({ width: "720"}, 500, function () {
        $(".hideLegend").show();
    });
});

DEMO: http://jsfiddle.net/2Mpdc/3/

Upvotes: 1

Related Questions