Question

HTML code consists of a div with spans of two types of classes: “hide” and “keep.”

<div>
    <span class"hide">Lorem ipsum dolor sit amet, </span>
    <span class="keep">consectetur</span>
    <span class"hide"> adipisicing elit, sed do </span>
    <span class="keep">eiusmod</span>
</div>

JQuery code is in place that selects spans with class hide so that they may be faded out, leaving only the spans of class “keep” visible within the div.:

last.children("span.hide").fadeOut();

Question: How can I animate the movement of the “keep” spans from their original positions in the text to their final visible positions?

The animation code is not a challenge to write so long as the initial and final position of each span can be identified. The challenge(, I suspect,) is to determine the final position of each span once the “hide” class spans are hidden. Note that, despite my example code, there is an arbitrary number of “hide” and “keep” spans within the div, each with arbitrarily large contents.

Note: JQuery 1.6+ is used.

---

Bonus Question: How can I animate the movement of the “keep” spans back to their original positions after fading in the “hide” spans?

Answer 1

Here’s my raw, mostly untested thought:

1. Get the positions of the “keep” elements.
2. Hide the “hide” elements with display: none.
3. Get the new positions of the “keep” elements.
4. Show the “hide” elements again.
5. Hide the “hide” elements with visibility: hidden (so they retain their place in the layout)
6. Animate the positions of the “keep” elements relative to their normal position.

Because you do all of that without yielding, the user should just see the animation (live example):

var hide, keep, deltas;

hide = $(".hide");
keep = $(".keep");

// Get current positions
deltas = [];
keep.each(function(index) {
  deltas[index] = $(this).offset();
});

// Hide and query new position
hide.hide();
keep.each(function(index) {
  var pos = $(this).offset();
  deltas[index].left -= pos.left;
  deltas[index].top  -= pos.top;
});

// Show again, hide whilst keeping space, then animate
hide.show().css("visibility", "hidden");
keep.each(function(index) {
  $(this).animate({
    left: -deltas[index].left,
    top:  -deltas[index].top
  });
});

That’s completely un-optimised, and you probably want to do something when all the animations are complete, but it’s a start and that live copy does actually work.

Re the bonus question: That part’s easy, just animate back to left: 0px / top: 0px.

Here’s a version with a toggle, and adding in the fades (live copy):

var hide, keep, deltas;

// Get the spans
hide = $(".hide");
keep = $(".keep");

// Showing or hiding?
showing = !showing;
if (showing) {
  // Showing, this is easy
  hide.css("visibility", "").hide().fadeIn();
  keep.animate({
    left: 0,
    top:  0
  });
}
else {
  // Hiding -- get current positions
  deltas = [];
  keep.each(function(index) {
    deltas[index] = $(this).offset();
  });

  // Hide and query new position
  hide.hide();
  keep.each(function(index) {
    var pos = $(this).offset();
    deltas[index].left -= pos.left;
    deltas[index].top  -= pos.top;
  });

  // Show again, hide whilst keeping space, then animate
  hide.show().fadeOut(function() {
    $(this).show().css("visibility", "hidden");
  });
  keep.each(function(index) {
    $(this).animate({
      left: -deltas[index].left,
      top:  -deltas[index].top
    });
  });
}

It’s more fun with more text.