javascript - Jquery Carousel positions sibling below div during fadeIn with strange interactions -

javascript - Jquery Carousel positions sibling below div during fadeIn with strange interactions -

fiddle code fadein element of carousel appears below visible sibling element

i seem have carousel transition issue fadein element of carousel appears (prematurely?) straight below visible sibling element (.active-slide used designate visible slide ) takes place when transition finished(the nav arrows @ bottom start transition).

note:

this issue starts after second click function, i'm bit curious why occurs.

this issue can fixed giving position: absolute; .slide makes header login dropdown .mouseleave function run cursor moves on .slide div. explanation why dropdown ends abruptly when 'fix' applied appreciated well.

here code used implement carousel:

$('.arrow-next').click(function() { var currentslide = $('.active-slide'); var nextslide = currentslide.next();

if(nextslide.length === 0) { nextslide = $('.slide').first(); } currentslide.fadeout(600).removeclass('active-slide'); nextslide.fadein(600).addclass('active-slide'); }); $('.arrow-prev').click(function() { var currentslide = $('.active-slide'); var prevslide = currentslide.prev(); if(prevslide.length === 0) { prevslide = $('.slide').last(); } currentslide.fadeout(600).removeclass('active-slide'); prevslide.fadein(600).addclass('active-slide'); });

javascript jquery html css carousel