reiniger Posted October 19, 2010 Report Share 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 Link to comment Share on other sites More sharing options...
0 Леший Posted October 19, 2010 Report Share 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 Link to comment Share on other sites More sharing options...
0 reiniger Posted October 19, 2010 Author Report Share Posted October 19, 2010 Tur nebus tikai fona krasa. Tur bus bildes... Quote Link to comment Share on other sites More sharing options...
0 reiniger Posted October 19, 2010 Author Report Share 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 Link to comment Share on other sites More sharing options...
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?
Link to comment
Share on other sites
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.