animate and fade in at the same time - jquery

Question

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 :)

check this post... http://stackoverflow.com/questions/1652576/how-do-you-fadein-and-animate-at-the-same-time — HackerGK, Oct 18 '13 at 15:02

score 1 · Accepted Answer · answered Oct 18 '13 at 15:03

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

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

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.

animate and fade in at the same time - jquery

2 Answers2