Question

I have a selector I’m trying to animate and at the same time fade out it’s background image and fade in another background image. This is what I have so far. The script works fine, but it animates first then fades. Do you know a way so it animates and fades at the same time?

$(document).ready(function(){
    $(".selector").click(function () {
        $(this).animate({left: "75px"}, function () {
            $(this).fadeOut("fast", function () {
                $(this).addClass("selector-hover").fadeIn("fast");
            });
        });

        return false;
    });
});

I hope this makes sense. Thank you for your help.

Answer 1

alright use this example from the jquery animate page

$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});

http://api.jquery.com/animate/
The queue false should do the trick, take a look at the page and see it in action. You will need to scroll down a bit