Jump to content
php.lv forumi
  • 0

Jquery background bilde Fadein


reiniger

Question

Sveiki

 

Ideja ir tāda ka fona nomainas bilde ar efektu FadeIn un pārejie elementi paliek nemainīgi(nepazūd).

 

Bet mans uzmeistarojums visus elementu uztaisa par fadeout un tad pārlec fona krāsa un tad visi elementi ar fadein paradas.

<style type="text/css">
.bg1 { background-color: #6c0000; }
.bg2 { background-color: #5A2A00; }
.bg3 { background-color: #00345B; }
</style>

Jquery

<script type="text/javascript"> /* -------------- jQuery code --------------- */

	$(document).ready(function(){ 

		$("li.one").click( function(){ $
		        $('#bgFader').fadeOut( 2000, function(){
                       $('#bgFader').removeClass().addClass('bg1').fadeIn(2000);
                   })  
		});

		$("li.two").click( function(){ 
		        $('#bgFader').fadeOut( 2000, function(){
                       $('#bgFader').removeClass().addClass('bg2').fadeIn(2000);
                   })               
		});

		$("li.three").click( function(){ $
		        $('#bgFader').fadeOut( 2000, function(){
                       $('#bgFader').removeClass().addClass('bg3').fadeIn(2000);
                   })  
		}); 

	});

</script> 

Html

<body id="bgFader"> 
 <div id="container"> 
   <h1>Changing the background with JQuery</h1> 
   <ul id="icons"> 
     <li class="three"><a href="#">viens</a></li> 
     <li class="two"><a href="#">divi</a></li> 
     <li class="one"><a href="#">tris</a></li> 
   </ul> 
   </div> 	
</body> 

Kā to panākt ka fona krāsa tiek FadeOut un FadeIn nevis parējie elementi?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Lieta atrisināta.

<style type="text/css">
.bg1 { background-color: #6c0000; }
.bg2 { background-color: #5A2A00; }
.bg3 { background-color: #00345B; }
#bgFader {
           width: 100%;
           height: 1000px;
           position: absolute;
           z-index: 1;
       }
#container { position: relative; z-index: 5;}
</style>

 

Jquery

<script type="text/javascript"> /* -------------- jQuery code --------------- */

               $(document).ready(function(){ 

                       $("li.one").click( function(){ $
                               $('#bgFader').fadeOut( 2000, function(){
                       $('#bgFader').removeClass().addClass('bg1').fadeIn(2000);
                   })  
                       });

                       $("li.two").click( function(){ 
                               $('#bgFader').fadeOut( 2000, function(){
                       $('#bgFader').removeClass().addClass('bg2').fadeIn(2000);
                   })               
                       });

                       $("li.three").click( function(){ $
                               $('#bgFader').fadeOut( 2000, function(){
                       $('#bgFader').removeClass().addClass('bg3').fadeIn(2000);
                   })  
                       }); 

               });

       </script>

HTML

<body> 
<div id="bgFader"></div>
 <div id="container"> 
   <h1>Changing the background with JQuery</h1> 
   <ul id="icons"> 
     <li class="three"><a href="#">viens</a></li> 
     <li class="two"><a href="#">divi</a></li> 
     <li class="one"><a href="#">tris</a></li> 
   </ul> 
   </div>      
</body> 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...