内容淡入背景

时间:2012-08-20 17:48:44

标签: javascript jquery html css

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

由于

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

以下是http://jsfiddle.net/YL4p7/

的小提琴

Fadein有一个内置回调,只需将动画添加到该回调中,它将在后台淡入后执行。

还将相对位置添加到#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"});
    });
});​