Question

我已经设置了一个jQuery动画来更改网站标题处div上的背景图片。

图像比它的容器大，当动画这个时（导致动画的持续时间），它周围的元素会被短暂隐藏。

我可能错过了一些明显的东西，有人可以帮忙吗？

下面的jQuery和示例：

（示例现已删除，但可以通过动画div的背景图片来复制，其中div（带背景）浮动在顶部）

var currentBackground = 1;

function changeHeader() {
currentBackground++;
    if (currentBackground>6) currentBackground = 1;

        jQuery('.slider').fadeOut(1000,function() {
            jQuery('.slider').css('background', 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\') no-repeat center');
            jQuery('.slider').fadeIn(1000);
    });

    setTimeout(changeHeader,10000);
}


jQuery(document).ready(function($){
   setTimeout(changeHeader,10000);
})

Answer 1

这样的东西，你可以给background-image一个大小

if (currentBackground>6) currentBackground = 1;

        jQuery('.slider').fadeOut(1000,function() {
            jQuery('.slider').css({'background-image': 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\')',
                                   'background-repeat': 'no-repeat',
                                   'background-position': 'center',
                                   'background-size': '100px 100px'});
            jQuery('.slider').fadeIn(1000);
    });

Answer 2

$.fadeOut()使用了opacity，这会影响位于滑块#nav上方的菜单#slider_1。

Answer 3

解决了这个问题，非常感谢Aram的代码和Stefan让我对它的思考方式略有不同。

Trick是将Z-Index设置为低于JQuery语句中的其他页面元素，如下所示（仅在应用于css类时似乎不起作用）：

var currentBackground = 1;

function changeHeader() {
  currentBackground++;

  if (currentBackground>6) currentBackground = 1;

     jQuery('.slider').fadeOut(1000,function() {
        jQuery('.slider').css({'background-image': 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\')',
                               'background-repeat': 'no-repeat',
                               'background-position': 'center',
                               'z-index': '-1'});
        jQuery('.slider').fadeIn(1000);
  });

  setTimeout(changeHeader,10000);
}


jQuery(document).ready(function($){
   setTimeout(changeHeader,10000);
})

JQuery动画背景影响浮动在它上面的内容

3 个答案: