jQuery: Insert element before

by rity

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="side-header-content-1-2">
  content 1
</div>
<div class="side-header-content-3">
  content 2
</div>

CSS

div.side-header-content-1-2 {
  padding: 5px;
  background-color: #FF0000;
}
div.side-header-content-3 {
  padding: 5px;
  background-color: #00FF00;
}

JavaScript

(function($){
        $.fn.moveToBefore = function(selector){
            return this.each(function(){
                var cloneEl = $(this).clone().css({ 'display': "none" });
                $(this).slideUp({duration:1000}).queue(function(){
                    $(cloneEl).insertBefore(selector).queue(function(){
                        $(this).slideDown({duration:1000});
                        $(this).dequeue();
                    });
                    $(this).dequeue();
                });
            });
        };
    })(jQuery);

    jQuery(document).ready(function(e){
        $("div.side-header-content-3").moveToBefore("div.side-header-content-1-2");
    });