I'm in the process of creating a website and I want to be able to change background images with ease when clicked, like using fade in or fade out effects.
The onclick functionality is already implemented with jQuery, but I'm having trouble incorporating easing effects.
I've done some research online, but all the solutions I found involve using a div in a small portion of the page only.
My issue arises because I use these divs as full-page elements, taking up 100% width and height, with content on top of them.
I considered using sprites and animating the background position, but this doesn't work for me as I need my page to be responsive and have percentages in the background URL, whereas sprites require fixed widths (please correct me if I'm mistaken).
Additionally, there's another div behind the ones I'm working with, so adjusting opacity won't solve the problem. The website I am building is similar to this:
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;
}
Jquery:
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:
Thank you for your time.
Edit: I ended up simply using $
and setting a ("#feauture3").css('background-image','url("image")')background-color to the entire div that matched the images (the actual project doesn't include motorcycles as images). This solution worked well for me.