Question

This is how I currently do it:

function switchcontent(wait){
    //fade out image1
    $('#feature-img img:first-child, ').delay(wait).fadeOut('slow', function() {
        //fade in imag2
        $('#feature-img img:nth-child(2)').fadeIn('slow');
        var prev_img = ($(this).clone())
        $('#feature-img').append(prev_img);
        $(this).remove()
        switchcontent(wait);
    });
};

I’m not very satisfied with this solution, specially since i want to apply it to another element of child-elements aswell.

current HTML:

<div class="images span7">
  <img src="featured_1.png">
  <img src="featured_2.png">
</div>

I would like something that could also apply to:

<div class="feature-text">
  <div>
    <h1>Lugn i din eknonomi</h1>
    <p>Zenconomy är smart fakturering, redovisning och rapportering på nätet. Vi underlättar vardagen för företagare, redovisningsbyråer och programmerare.</p>
  </div>
  <div>
    <h1>GRAPH</h1>
    <p>GRAPH OF APPROVAL!</p>
  </div>
</div>

or any other element with childs in it for that matter 🙂

Answer 1

See http://jsbin.com/ufahiy/1/edit

$('div img:first').appendTo('div');

this will move the first element as last element of your div

No need to clone and remove it: a single append() of the element you want to move is enough. You can check the DOM using firebug and see the change