javascript - Fade between DIVS -

-


trying make fading effect between multiple divs. not working, please can me "im new in javascript"
demo generate code.
in demo code work when copy code, stop working.
hope question clear ! thanks
code try copy.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>  txt1 = $("#contentarea-1").text(); txt2 = $("#contentarea-2").text();  $("#pg1").on('click', function () {     $('#contentarea-2').hide();     $('#contentarea-1').fadeout(500, function () {         $("#contentarea-1").hide(txt2);         $('#contentarea-1').fadein(500);     }); });  $("#pg2").on('click', function () {     $('#contentarea-1').hide();     $('#contentarea-2').fadeout(500, function () {         $("#contentarea-2").text(txt2);         $('#contentarea-2').fadein(500);     }); });  </script>  <style> #content-wrapper{     margin-left: 50px; } #contentarea-1{     width: 450px; }  #contentarea-2{     width: 450px;     display:none; }  #clear{     clear: both; }  nav{     text-align: center; }  nav ul{     list-style: none; }  nav ul li{     display: inline-block;     padding: 15px; } </style>  <nav>     <ul>         <li><a href="#1" id="pg1">page 1</a></li>         <li><a href="#2" id="pg2">page 2</a></li>     </ul> </nav> <div id="content-wrapper">     <div id="contentarea-1">         <wbr><p>first page</p></wbr>     </div>     <div id="contentarea-2">         <wbr><p> second page</p></wbr>     </div>     <div id="clear"></div> </div>

there's slight change required. forgot wrap javascript in jquery domready container:

http://jsfiddle.net/3tx8u/

<script> $(function() {     txt1 = $("#contentarea-1").text();     txt2 = $("#contentarea-2").text();      $("#pg1").on('click', function () {         $('#contentarea-2').hide();         $('#contentarea-1').fadeout(500, function () {             $("#contentarea-1").hide(txt2);             $('#contentarea-1').fadein(500);         });     });     $("#pg2").on('click', function () {         $('#contentarea-1').hide();         $('#contentarea-2').fadeout(500, function () {             $("#contentarea-2").text(txt2);             $('#contentarea-2').fadein(500);         });     }); }); </script>

Comments

Post a Comment

Popular posts from this blog

objective c - Can't build GCM with Protobuf in Xcode -

-
recently i've decided integrate gcm project uses google protocol buffers. worked fine, sample ok. when i've tried integrate gcm via cocoapods project - started receiving build errors: undefined symbols architecture x86_64: "_gsdk_pblogicalrightshift32", referenced from: _serializedsize in libgcmlib.a(gcmsecuresocket.o) "_objc_class_$_gsdk_pbcodedoutputstream", referenced from: objc-class-ref in libgcmlib.a(gcmsecuresocket.o) "_objc_class_$_gsdk_pbdescriptor", referenced from: objc-class-ref in libgcmlib.a(gtalkcore.pb.o) objc-class-ref in libgcmlib.a(gtalkextensions.pb.o) "_objc_class_$_gsdk_pbgeneratedmessage", referenced from: _objc_class_$_gtalkheartbeatping in libgcmlib.a(gtalkcore.pb.o) _objc_class_$_gtalkheartbeatack in libgcmlib.a(gtalkcore.pb.o) _objc_class_$_gtalkerrorinfo in libgcmlib.a(gtalkcore.pb.o) _objc_class_$_gtalksetting in libgcmlib.a(gtalkcore.pb.o) _objc_class_$_gtalkloginrequest in libgcmlib.a...
Read more

ember.js - EmberJS Model find not up-to-date with underlying store -

-
for simple overview screen have developed route sets controller app.location.find(). app.locationsindexroute = ember.route.extend({ setupcontroller: function(controller) { controller.set('content', app.location.find()); }, rendertemplate: function() { this.render('locations.index',{into:'application'}); } }); i naively assumed go store , fetch me records, giving me up-to-date view of records. apparently not.... when external process starts removing records database, app.location.find() keeps on returning these deleted records. (although rest call doesn't show them anymore) if external process starts adding records database, app.location.find() picks them up. if delete records form within ember app model correctly updated. how should deal in ember app ? i'd have up-to-date view on whatever in database. right need refresh page (f5) date view. using linkto helpers shows me stale data. this seems yet trivial thing misse...
Read more

javascript - jQuery iScroll clickable list elements while retaining scroll? -

-
is possible have clickable elements? such list elements? while using iscroll? seems short of button, or maybe link can't click on element make something. had similar issue inputs well. enough searching able find solution helped me place work inputs. have need have scrollable ui while having ability click on thats not button or link, such li contained within specific uls. so wondering if there way of having iscroll tell difference between click or tap rather vs scroll, , such have action desired.
Read more