javascript - 内容淡入背景

Question

我在这个网站上工作：http: //mccraymusic.com/newsite/我无法确定如何在背景上正确淡入导航栏点击“进入网站”时背景褪色后。我知道导航栏还没有样式。我很确定我有正确的导航代码来淡入。只是不知道如何让它工作，所以它会在我想要的时候淡入。

谢谢

Answer 1

I suspect you need to use a callback in jQuery. Basically, the second function runs AFTER the first has completed.
http://www.w3schools.com/jquery/jquery_callback.asp

Answer 2

Here is a fiddle of it http://jsfiddle.net/YL4p7/

Fadein has a builtin callback, just add you animation into that callback and it will execute after the background has faded in.

also add relative position to #container so that it can be seen over the bg image.

$(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"});
    });
});​