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

我设置了一个jQuery动画来更改网站标题的div上的背景图像。影响内容的JQuery动画背景漂浮在它上面

图像比其容器大，并且在动画制作时（对于动画的持续时间而言），其周围的元素会短暂隐藏。

我可能错过了明显的东西，任何人都可以帮忙吗？

jQuery的下方，并且例如在这里：

（例如现在删除，但可以通过与另一种格动画一个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); 
})

来源

2012-01-04 Oli Stockman

你shouldn't调用'setTimeout（）'两次，而不是函数本身。 – Stefan 2012-01-04 10:10:02

你是什么意思，我可能错过了明显的东西，任何人都可以帮忙吗？我们怎么才能知道你在这个动画中面临的问题......可以请你解释一下。 – Murtaza 2012-01-04 10:12:48

感谢Stefan，现在全部排序，我会在我的6小时限制结束后发布！ – 2012-01-04 11:38:52

解决了这个问题，非常感谢Aram的代码和Stefan让我有点不同的想法。

关键是要设置一个Z-指数低于在下面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); 
})

来源

2012-01-04 19:31:57

财产以后这样的，你可以给一个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); 
    });

来源

2012-01-04 10:01:02

谢谢大家的帮助，Aram，背景大小给了我图像纵横比的问题，但我发现在JQuery CSS语句中强制Z-Index修复了它（这似乎在褪色）... – 2012-01-04 11:30:05

$.fadeOut()使用opacity和影响您的菜单#nav位于滑块#slider_1的上方。

来源

2012-01-04 10:17:13 Stefan

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

回答

相关问题