0

I have this example:

EXAMPLE

When you click the button the red text slides out to left but the problem is that the text in yellow jumps to the new position when the animation finished. How the yellow text can be "animated" to go to the new position in real time while the red text is sliding out?

HTML:

<div id="1" style="float:left; color:blue">
    <a>THIS IS NUMBER 1</a>
</div>

<div id="2" style="float:left; color:red">
    <a>THIS IS NUMBER 2</a>
</div>

<div id="3" style="float:left; color:yellow">
    <a>THIS IS NUMBER 3</a>
</div>

<br/>
<button id="btn">GO!</button>

JS:

$("#btn").click(function()
{
   $("#2").hide("slide", { direction: "left" }, 700);
});

1 Answer 1

1

The yellow text is jumping because jQuery is removing the element above it, and the page is adjusted accordingly. You can try something like this to make it smoother:

$("#btn").click(function()
{
   $("#2").hide("slide", { direction: "left" }, 700);
   $("#3").slideUp('slow', function() {
    // add anything else you want to do here for when this animation completes.
    // if not, just use .slideUp('slow');
  });
});

This is untested and off the top of my head but it should get you close,

Alternately try using the .animate() method:

$("#btn").click(function()
{
    $('#2').animate({"width": "toggle", "height":"toggle", "opacity": "toggle" }, "slow");
});

Example: http://jsfiddle.net/YG5rh/2/

2
  • Sorry that's not a "good" answer. Look at my edit above and review the jsfiddle example. If that doesn't resolve your question then you need to be clearer as to what you want.
    – Jack
    Commented Feb 21, 2013 at 22:10
  • For the slide effect, not the toggle, just remove "height":"toggle": $('#2').animate({"width": "toggle", "opacity": "toggle"}, "slow");
    – Martín
    Commented Feb 22, 2013 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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