jQuery Background Change

jQuery Background Change

Today, We want to share with you jQuery Background Change.In this post we will show you jquery change background image fade, hear for how to change div background color dynamically using jquery we will give you demo and example for implement.In this post, we will learn about Change Background Image of HTML DIV with Fade Animation using jQuery with an example.

Background Change using CSS and jQuery

There are the Following The simple About simple CSS Background Change using jQuery Full Information With Example and source code.

As I will cover this Post with live Working example to develop How to Set CSS background-image Property Using jQuery, so the jQuery: Change the background color of a element for this example is following below.

  PHP Functions - MY SQL Connects and Global Variable

Step 1: HTML

index.html

<body id="panel">
 	<h3>Changing background image using jquery</h3>
<div id="card"></div>
 
<div id="cheaponcup">
   
   
<div id="bunch"><img src="bunch/panelclick.png" width="24" height="26"></div>
 
<div id="panelbox">
 
<div id="websname">
 
<ul>
<li><img src="bunch/g+.png" width="90" height="95" dir="2.png"></li>
<li><img src="bunch/g.png" width="90" height="95" dir="1.png"></li>
<li><img src="bunch/you.png" width="90" height="95" dir="3.png"></li>
<li><img src="bunch/mp.png" width="90" height="95" dir="4.png"></li>
<li><img src="bunch/pl.png" width="90" height="95" dir="5.png"></li>
<li><img src="bunch/n.png" width="90" height="95" dir="6.png"></li>
<li><img src="bunch/gm.png" width="90" height="95" dir="7.png"></li>
<li><img src="bunch/gd.png" width="90" height="95" dir="8.png"></li>
<li><img src="bunch/gc.png" width="90" height="95" dir="9.png"></li>
<li><img src="bunch/gt.png" width="90" height="95" dir="10.png"></li>
<li><img src="bunch/gbb.png" width="90" height="95" dir="11.png"></li>
<li><img src="bunch/gb.png" width="90" height="95" dir="12.png"></li>
<li><img src="bunch/gp.png" width="90" height="95" dir="13.png"></li>
</ul>
 
</div>
 
<div id="extra">More</div>
 
<div id="cheap">Less</div>
 
</div>
 
</div>
 
</body>

Step 2: JAVASCRIPT

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
 
<script>
 
$(document).ready(function(){
 
 $('#extra').click(function(event){
 $('ul').animate({marginTop:'-290px'},200);
 $('#panelbox').animate({height:'280px'},200);
 $('#extra').animate({marginTop:'-100px'},200).hide();
 $('#cheap').show().animate({marginTop:'-100px'},200);
 event.stopPropagation();

 });
  
  
 $('#cheap').click(function(event){
  $('ul').animate({marginTop:'0'});
 $('#panelbox').animate({height:'380px'});
 $('#cheap').animate({marginTop:'0'}).hide();
 $('#extra').show().animate({marginTop:'0'});
  event.stopPropagation();
 });
  
  
 $('#bunch').click(function(event){
  $('#panelbox').fadeIn('slow');
  event.stopPropagation();
   
 });
 $('li img').click(function(){
  var imgpanel = $(this).attr('dir');
  $('#panel').css({backgroundImage: "url("+imgpanel+")"});
 });
  
  
 
 
$('#card').click(function() {
     
 $('#panelbox').hide();
 $('ul').animate({marginTop:'0'});
 $('#panelbox').animate({height:'380px'});
 $('#extra').animate({marginTop:'0'}).show();
 $('#cheap').animate({marginTop:'0'}).hide();
 
 });
  
});
 
</script>

Step 3: CSS

<style>
#cheaponcup{width:30px; height:20px;position:absolute;right:0; top:50px; z-index:3;}
 
ul{list-style:none; margin:0; padding:0;}
 
li{ float:left;padding:5px; cursor:pointer;}
 
#panelbox{ width:320px; height:380px; color:#000; box-shadow:0 0 10px #CCC; border:solid #CCC 1px;font-family:Tahoma, Geneva, sans-serif; font-size:18px; color:#666;overflow:hidden; display:none; position:absolute; right:10px;}
 
#websname{ width:300px; height:290px; overflow:hidden; margin:20px;}
 
#extra{ width:100%; height:40px; cursor:pointer; background-color:#FFD7AE; text-align:center; padding:15px 0 0 0; font-size:14px;}
 
#cheap{width:100%; height:40px; cursor:pointer; background-color:#FFD7AE; text-align:center; padding:15px 0 0 0; font-size:14px;}
 
#bunch{ cursor:pointer;}
 
#card{background-image:url(light.png);position:fixed; top:0; left:0; width:100%; height:100%; z-index:1;}
 
#panel{background-image:url(1.png);background-size:100% auto;}
 
</style>

Web Programming Tutorials Example with Demo

Read :

  PHP Laravel 6 Sessions Tutorial

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jQuery Background Change.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.