2

我是 jQuery 的新手。我想开发一个工具提示动画，它将出现在第 1 宫（最左边），然后出现在第 2 宫，然后在第 3 宫和第 4 宫相同，然后再次从第 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)
    });

});

我也尝试过其他方法来实现我的目标，但没有运气。需要帮助并提前致谢。这是网站网址。http://umairdesigner.com/builder/

4

2 回答 2

0

这应该可以修复您的气泡显示：

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()将不起作用。

于 2012-05-16T11:03:53.867 回答
0

我认为你可以这样做：

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');
        });
      });
    });
  });
于 2012-05-18T08:58:39.323 回答