Нужна помощь по jQuery каждой анимации

Question

Я новичок в jQuery. Я хочу разработать анимацию всплывающей подсказки, которая появится в 1-м доме (слева), затем появится на втором доме, затем на третьем и четвертом и снова начнется с первого. Я также хочу навести эффект на дом. Когда мышь закончится в любом доме, появится соответствующая подсказка этого дома. Вот код;

<script type="text/javascript"> 
$(document).ready(function() { 

    var bubble = $('.bubble-tooltip'); 
    bubble 
     .eq(0).delay(1500).fadeIn('slow').delay(1000).fadeOut('slow') 
     .eq(1).delay(2000).fadeIn('slow').delay(1000).fadeOut('slow') 
     .eq(2).delay(2500).fadeIn('slow').delay(1000).fadeOut('slow') 
     .eq(4).delay(3000).fadeIn('slow').delay(1000).fadeOut('slow'); 

    $('.cloud').delay(5000).fadeIn('slow', function() { 
     $(this).animate(
      {'left': -35}, 
      {duration: 2000} 
     ) 
     //bubble.delay(1000).fadeOut('slow'); 
     $('.bg-overlay').fadeIn(2000) 
    }); 

}); 

Я пробовал другие методы тоже для достижения своей цели, но не повезло. Нужна помощь и спасибо заранее. И вот сайт url. http://umairdesigner.com/builder/

Answer 1

Я думаю, что вы можете сделать так:

var bubble = $('.bubble-tooltip'); 
var j = 0; 
$(bubble).each(function(i){ 
    $(bubble[j]).delay(1500).fadeIn('slow').delay(1000).fadeOut('slow', function(){ 
     $(bubble[j + 1]).delay(1500).fadeIn('slow').delay(1000).fadeOut('slow'); 
     j++; 
    }); 
}); 

или в случае 4 фиксированных домов:

var bubble = $('.bubble-tooltip'); 
    bubble.eq(0).fadeIn('slow').delay(1000).fadeOut('slow', function(){ 
    bubble.eq(1).fadeIn('slow').delay(1000).fadeOut('slow', function(){ 
     bubble.eq(2).fadeIn('slow').delay(1000).fadeOut('slow', function(){ 
     bubble.eq(3).fadeIn('slow').delay(1000).fadeOut('slow', function(){ 
      bubble.eq(4).fadeIn('slow').delay(1000).fadeOut('slow'); 
     }); 
     }); 
    }); 
    }); 

Answer 2

Это должно исправить ваш budbbles показывая:

var bubble = $('.bubble-tooltip'); 

bubble.eq(0).delay(1500).fadeIn('slow').delay(1000).fadeOut('slow'); 
bubble.eq(1).delay(2000).fadeIn('slow').delay(1000).fadeOut('slow'); 
bubble.eq(2).delay(2500).fadeIn('slow').delay(1000).fadeOut('slow'); 
bubble.eq(4).delay(3000).fadeIn('slow').delay(1000).fadeOut('slow'); 

Это не будет работать приковано вместе, потому что возвращаемое значение .fadeOut('slow') не будет ваша коллекция пузыря - так дальнейшее использование .eq() не будет работать.