reiniger Posted October 19, 2010 Report Posted October 19, 2010 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? Quote
0 Леший Posted October 19, 2010 Report Posted October 19, 2010 Ja nekļūdos, tad tieši ar background-color animāciju jquery bija problēmas, un bija jāizmanto kaut kādu pluginu, laikam jquery.color Quote
0 reiniger Posted October 19, 2010 Author Report Posted October 19, 2010 Tur nebus tikai fona krasa. Tur bus bildes... Quote
0 reiniger Posted October 19, 2010 Author Report Posted October 19, 2010 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> Quote
Question
reiniger
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?
3 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.