CODEWITHSUNDEEP
javascriptjquery
user1448485
user1448485

Reputation: 47

animate and fade in at the same time - jquery

I've puzzled over this for ages, but I can't seem to pinpoint how to make an .animate and a .fadeIn happen simultaneously, rather than consecutively.

So when I try it, the object fades in, and then moves, but I would LOVE to achieve something like this:

http://www.schoolwebsite.com/ - see the tooltips that appear on hovering social media icons at the bottom of the page for instance

See my bodged attempt below

$(".content_slider li a").hover(function () {
    $(this).find('.hover_arrow').animate({
        "bottom": "+=100px"
    }, "fast").fadeIn('fast');
},function () {
    $(this).find('div.hover_arrow').animate({
        "bottom": "+=100px"
    }, "fast").fadeOut('fast');
})

Any assistance is massively appreciated :)

Upvotes: 0

Views: 1648

Answers (2)

Tim
Tim

Reputation: 6441

Both animate and fadeIn have the queue option.

By default they end up in the same queue, and are therefore performed after another.

Either put them in separate queues, or don't queue them at all.

See also: What are queues in jQuery?

Upvotes: 0

Richard Peck
Richard Peck

Reputation: 76784

Instead of using fadein as a separate method, why don't you use opacity with the animate method?

$(this).find('.hover_arrow').animate({"bottom": "+=100px", "opacity": "1"}, "fast")}

You'd have to change your CSS to have the item as "opacity: 0" instead of just display: none;, but you'd be able to include the effect in a single function

If you want to retain display: none (for a clean interface), you might want to include this call as well:

$(this).find('.hover_arrow').show() //display: block
$(this).find('.hover_arrow').animate({"bottom": "+=100px", "opacity": "1"}, "fast")} //opacity: 1

Upvotes: 1

Related Questions