内容淡入背景

Content Fade In over background

本文关键字：背景 淡入      更新时间：2023-09-26

我在这个网站上工作：http://mccraymusic.com/newsite/当点击"进入网站"时，背景变淡后，我很难弄清楚如何在背景上正确地淡入导航栏。我知道导航栏还没有样式。我很确定我有合适的导航代码来淡入。只是不确定如何使它工作，所以它会在我想要的时候淡入。

感谢

我怀疑您需要在jQuery中使用回调。基本上，第二个函数在第一个函数完成后运行
http://www.w3schools.com/jquery/jquery_callback.asp

这是一个小提琴http://jsfiddle.net/YL4p7/

淡入淡出有一个内置回调，只需将动画添加到该回调中，它就会在背景淡入后执行。

还为#container添加了相对位置，这样就可以在bg图像上看到它。

$(function() {
    var images = ["black.jpg","bg.jpg"];
    $('<img>').attr({'src':'http://mccraymusic.com/newsite/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
    $('.move').animate({
            top:200,
            left:250,
    });
    $('.entersite').click(function(e) {
        e.preventDefault();
        var image = images[1];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'http://mccraymusic.com/newsite/assets/images/'+image); 
              $(this).fadeIn(1000, function() {
                  $('.navbar').fadeIn(1000);
              });
        });
        $('.move').animate({"left": "-=50px", "top": "-=200px"});
    });
});​
相关文章：