Help in optimizing my jQuery -- is my coding efficient?

Hey guys, I've just recently began learning javascript & jQuery though I feel my coding mechanisms could use much improvement. I pasted a portion of my code below in hopes somebody here could point me in the correct direction and let me know what could be optimized & cleaned up.

edit: I thought I had posted this in the jQuery forum. My apologies.

// Variables
var contentSection = "#main-content";
var backgroundSection = "#maximage";
var activeClass = "list-active";
var hiddenSection = "#hidden";
var activeAnim = "pulse";
var menuParent = "#sidebar";
var movingClass = ".move";
var family;

// Initialize background slider
$(function(){
	jQuery(backgroundSection).maximage({cycleOptions:{random:1, timeout:200000}});
});

// appendTo function for convenience.. copy/pasta
(function($){
	$.fn.moveTo = function(selector){
		return this.each(function(){
			var cl = $(this).clone();
			$(cl).appendTo(selector);
			$(this).remove();
		});
	};
})(jQuery);

$(function() {   
  // Click menu items
  $(menuParent + " ul li a").click(function() { 
  
    // Define some variables
	$listItem = $(this);
  	var clickedLi = $(this).parent();
	var anchorVal = $(this).text();	
	
	// Cycle to next background
	$(backgroundSection).cycle('next');
	
    if($(this).hasClass(activeClass)) {
		// If it's the active menu
	} else {
		// Re-arrange menu items
			// IE9 & below animation fallback
		if ( $.browser.msie && $.browser.version < 10 ) {
			$(clickedLi).parent().fadeOut(1000, function() {
				$(clickedLi).parent().prepend(clickedLi);
			}).fadeIn(1000, function(){
				callContent(anchorVal, $listItem);
			});
		// If viewers IE does support CSS3 Animations
		} else {
			$(clickedLi).parent().hide().prepend(clickedLi).show();
				callContent(anchorVal, $listItem);
		}
	}
  // Hover state for menu items
  }).hover(function() { 
			if(!$(this).hasClass(activeClass)){
				$(this).css("zIndex", 300);
				$(this).animate({
					padding: "15px 15px 15px 0",
					background: "black"
				}, 300);
			}
			}, function(){ 
			if(!$(this).hasClass(activeClass)){
				$(this).animate({
					padding: "0 15px 0 0"
				}, 300);
				$(this).css("zIndex", 0)
			}
	});
  
	// Retrieve new content
  function callContent(anchor, $listItem){
	$(contentSection).slideUp(0, function(){ 
		$(contentSection).find(movingClass).moveTo(hiddenSection).empty();
			$(hiddenSection).find('#' + anchor).moveTo(contentSection);
		$(menuParent + " li > *").removeClass();
	}).slideDown(500);
	$listItem.addClass(activeClass + " animated " + activeAnim); 
	$listItem.css("padding", "0 15px 0 0");	
  }
});

Code (markup):

 

At a quick glance:

 

Since it's jquery, AND it appears you're using javascript to do CSS' job, of course it's not efficient. If anything, it looks like "gee ain't it neat" animated rubbish that has no business on a website in the first place.

Though if you have a sample page showing what it is that mess is even trying to do, we could probably dial in a bit more precise an analysis.

 

Your conclusion is awfully narrow. Sure I could use CSS3 for some of the animations on this page, though here's a fun fact: backwards compatibility is still an important factor to consider. Not to mention IE9 is still a widely used browser who doesn't support CSS3 animations.

Before jumping the ship take into consideration that not all websites are the same.

Anyways, I was able to research and modify my code up to par.