点击时背景淡入

Question

我试图在点击时让这个背景淡入。我找到了一个有用的教程，最终创建了代码，使其有两张图片，它们在点击时淡入淡出，以显示图片。

这是我的作品：http://www.mccraymusic.com/bgchangetest.html

只有几个问题：

1. 如何使其工作而不会随机选择图片？我希望它只从纯黑色图像切换到鼓组图像。（如果可能的话还要交叉淡入淡出，但不是必须的）

2. 如何将图像居中对齐，以便鼓的图像居中显示在页面上？

- Lavi Hendin

Answer 1

我猜这就是你想要的内容：

$(function() {
    var images = ["black.jpg","bg.jpg"];
    $('<img>').attr({'src':'http://www.mccraymusic.com/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);

    $('.entersite').click(function(e) {
        e.preventDefault();
        var image = images[1];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'http://www.mccraymusic.com/assets/images/'+image); 
              $(this).fadeIn(1000);
        });
        $(this).fadeOut(1000, function() {
            $(this).remove();
        });
    });
});​

演示

还添加了：

display: block;
margin-left: auto;
margin-right: auto;

将图片居中到您的#bg元素，请按如下方式操作。

- adeneo

---

是的。谢谢，那就是效果！但是背景仍然无法居中。 - Lavi Hendin

Answer 2

好的，假设您使用JQuery

您有#backgroundid和#imageid
首先设置

$('#backgroundid').css('opacity',1);
$('#imageid').css('opacity',0); // setting opacity (transparency) to 0, invisible

现在你有#buttonid。
设置一个jQuery事件，使得当它被点击时，你可以用jQuery的动画效果淡出背景，并淡入图像。

$('#buttonid').click(function() {
    $('#backgroundid').animate(function() {
        opacity : 0 // fade it to 0 opacity, invisible
    }, 1000); // animation will take 1000ms, 1second
    $('#imageid').animate(function() {
        opacity : 1 // fade it to full opacity, solid
    }, 1000);
});

现在来谈谈图片居中的问题。
您可以使用CSS进行管理。

body { /* Body or #imageid parent */
    text-align : center;
}
#imageid {
    margin: 0px auto;
}

或者您可以采用 JQuery 解决方案，使用绝对/固定定位。
首先，使用一些 CSS 来固定您的图像位置。

#imageid {
    position: absolute; // or fixed, if you want
}

现在使用 JQuery 重新定位它

function positionImage() {
    var imagewidth = $('#imageid').width();
    var imageheight = $('#imageid').height();
    $('#imageid').css('left', ($(window).width() - imagewidth) / 2);
    $('#imageid').css('top', ($(window).height() - imageheight) / 2);
}
$(document).ready(positionImage); // bind the ready event to reposition
$(window).resize(positionImage); // on window resize, reposition image too

- Overcode

Answer 3

如果您保留一个高度和宽度均为100％，背景色为黑色的div元素。然后根据需要更改div的不透明度以获得淡入/淡出效果，这应该会产生相同的效果。 我猜...

- Captain Jack Sparrow

Answer 4

最好使用任何可用的jQuery插件，因为它们已经针对多个浏览器进行了优化和错误修复。

尝试 lightBoxMe 插件 http://buckwilson.me/lightboxme/

这是最简单的插件！

- afrin216