jquery - 轻松更改背景图片 onclick

Question

我正在实现一个网站，我想在点击时轻松更改背景图像，例如淡入淡出或其他。

onclick 部分是用 Jquery 实现的，但我正在努力处理缓动部分。

我在网上搜索过这个，但每个解决方案都只在页面的一小部分使用 div。

我的问题是我将这些 div 作为整个页面使用，宽度和高度为 100%，并且我在 div 前面有内容。

我考虑过使用 sprites 并为背景位置设置动画，但这无济于事，因为我希望我的页面具有响应性并且我在背景 url 上有百分比并且 sprites 需要您声明固定宽度(如果我错了请纠正我).

此外，我必须补充一点，在 div 后面还有一个 div，因此更改不透明度解决方案无济于事。我正在实现这样的网站:http://www.samsung.com/global/microsite/galaxynote3-gear/

HTML:

<div class="Page" id="feauture3">
    <div id="feauture3_content">
        <div id="feauture3_1"><strong>Menu1</strong></div>
        <div id="feauture3_2"><strong>Menu2</strong></div>
        <div id="feauture3_3"><strong>Menu3</strong></div>
        <div id="feauture3_4"><strong>Menu4</strong></div>
    </div>
</div>

CSS:

#feauture3_1:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_2:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_3:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_4:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3 {
        position: fixed;
        height: 100%;
        width: 100%;
        background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
        left:0; 
        background-size: cover;
        background-color:#e18764;
        color:red;
}

J查询:

jQuery(document).ready(function($){
       $("#feauture3_1").click(function(){
       $("#feauture3").css('background-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")');
    });

    $("#feauture3_2").click(function(){
        $("#feauture3").css('background-image','url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")')
    });

    $("#feauture3_3").click(function(){
        $("#feauture3").css('background-image','url("http://b296d35169b22ec514a7-3f0e5c3ce41f2ca4459ddb89d451f8d9.r21.cf2.rackcdn.com/wp-content/uploads/2012/11/Kawasaki-Z1-by-Ac-Sanctuary-.jpg")')
    });

    $("#feauture3_4").click(function(){
        $("#feauture3").css('background-image','url("http://4.bp.blogspot.com/-ar4zyO_Ws4M/UekF8jk7nRI/AAAAAAAA1q4/ugQZlRGTLkk/s1600/Kawasaki-Z-1000-.jpg")')
    });

});

fiddle :

http://jsfiddle.net/9pWhN/1/

感谢您的宝贵时间。

编辑:我最终使用了一个简单的 $("#feauture3").css('background-image','url("image")') 并设置了一个 background-color 到与图像匹配的整个 div(真实元素没有摩托车作为图像)。这是完全可以接受的，我使用了这个解决方案。

Answer 1

CSS 转换怎么样？

#feauture3 {
    position: fixed;
    height: 100%;
    width: 100%;
    background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
    left:0;
    background-size: cover;
    background-color:#e18764;
    color:red;
    -webkit-transition:all 1.4s ease-in-out;
    -o-transition:all 1.4s ease-in-out;
    -moz-transition:all 1.4s ease-in-out;
}

试试这个 fiddle