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

Winapi c++: DialogBox hangs when breaking a loop -

-
i've created s simple w32 application cicle through 2 applications(hard coded window classes atm). when call start button (idc_start) works fine, when change focus hwnd application hangs cannot closed. need simple , clean method stop loop, start when calling idc_start. apreciated! #include <stdio.h> #include <stdlib.h> #include <conio.h> #include <windows.h> #include <resource.h> #include <iostream> using namespace std; bool callback dlgproc(hwnd hwnd, uint message, wparam wparam, lparam lparam) { hwnd hwnd1,hwnd2; hwnd1 = findwindow("notepad++",0); hwnd2 = findwindow("notepad",0); bool bdone; switch(message) { case wm_initdialog: // set dialog box, , initialise default values { setdlgitemint(hwnd, idc_number, 5, false); hicon hicon, hiconsm; hicon = (hicon)loadimage(null, "e32.ico", image_icon, 32, 32, lr_loadfromfile); if(hicon) se...
Read more

vb.net - Font adding using PDFsharp -

-
i using pdfsharp add text pdf. when use below code add following text these fonts facing problem. after pdf created using pdfsharp , when opened in adobe reader getting message "cannot find or create font 'windings'. characters may not display or print correctly." opens the source pdf trying modify has fonts helvetica , windings(embedded) this part of code adds text pdf dim font xfont = new xfont("verdana", 20, xfontstyle.regular) gfx.drawstring("hello, world!", font, xbrushes.black, new xrect(0, 0, page.width, page.height), xstringformats.center) font = new xfont("wingdings", 20, xfontstyle.regular) gfx.drawstring("llll", font, xbrushes.black, new xrect(25, 15, page.width, page.height), xstringformats.center) font = new xfont("helvetica", 20, xfontstyle.regular) gfx.drawstring("abcd", font, xbrushes.black, new xrect(50, 25, page.width, page.height), xstringformats.center) after using code text ge...
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