how to change the background images with fade

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • liran202
    New Member
    • Nov 2011
    • 4
    #1

    how to change the background images with fade

    Hi,

    I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.

    thanks.

    how can I "merge" between the function that's changing the images and the function that in charge of the fade.
    Code:
     
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=7"> 
	<title>none</title>
	<link rel="stylesheet" type="text/css" href="Css/design.css" >
	 <script src="query-1.4.4.js" type="text/javascript"></script> 
	<script type="text/javascript">
	$(document).ready(function() 
	{
		$(document).ready(function() ({$('').fadeIn(1000);	
	});
	</script>
	<script language="JavaScript">
	function changeBg (color) {
	  document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
	</script>
	</head>
	<body>
	<div id="wrapper" class="wrapper">
		 <div class="logo"><a href="http://mazonit.co.il/"><img border="0" src="Images/logo.png" ></a>
		 </div>
			<div class="menu">
				<a href="#" id="arrowleft"><img border="0" src="Images/arrowleft.png" ></a>
				<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
				<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
				<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
				<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
				<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
				<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
				<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
				<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
				<a href="#" id="arrowright"><img border="0" src="Images/arrowright.png" ></a>
	</div>
	</body>
	</html>
    Tags: jquery, jqwery
    • liran202
      New Member
      • Nov 2011
      • 4
      #2
      fade background image with fadein()

      this is my code,I want the change of the background image,which I bulid a 'ChangeBg' function for,to be fade,so I add the fadein() varible.

      why this is not working? what am I doing wrong?

      Code:
       <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"type="text/javascript"></script> 
 <script language="JavaScript"> 
 function changeBg (color) { 
  document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-  repeat"; 
  $("changeBg").fadeIn("slow"); } 
  </script>

        Comment

        • zorgi
          Recognized Expert Contributor
          • Mar 2008
          • 431
          #3
          Since you already imported jQuery and by the look of things want to use some sort of JavaScript to assign background to your #wrapper why don't you use jQuery to do so:

          Code:
          $('#wrapper').css({backgroundImage : "url(1.JPG)"});
          Than when you want to change backgrounds just fade out background image and use callback function to change backgrounds url and fade back in. something like this:

          Code:
          $('#wrapper').fadeOut(1000, function(){
    $(this).css({backgroundImage : "url(2.JPG)"});
    $(this).fadeIn(1000);
});

            Comment

            • Ephexeve
              New Member
              • May 2011
              • 20
              #4
              I'll give you one tip about your code, try not to mix Javascript with HTML. It makes a mess. separate things.

                Comment

                Previous template Next
                Working...