javascript - Adding a fade in/fade out effect to innerHTML -
i have function loads in json file , changes contents of several divs on page. part works correct, wanted make sexy. when button calls function clicked, new text replaces old text. wanted old text fade out, change text, , fade in new text.
here code
function loadnextpassage() { //fading out effect $("#passage-title").fadeout(); $("#title").fadeout(); $("#pre-post").fadeout(); $("#passage").fadeout(); $("#media").fadeout(); //load new json file , change elements $.getjson("passage-2.3.2.json", function( data ) { document.getelementbyid("passage-title").innerhtml = data["passagenumber"]; document.getelementbyid("title").innerhtml = data["title"]; document.getelementbyid("pre-post").innerhtml = data["prereading"]; document.getelementbyid("pre-reading-content").innerhtml = data["prereading"]; document.getelementbyid("post-reading-content").innerhtml = data["postreading"]; document.getelementbyid("passage").innerhtml = data["reading"]; document.getelementbyid("media").innerhtml = data["media"]; //fading elements in $("#passage-title").fadein(); $("#title").fadein(); $("#pre-post").fadein(); $("#passage").fadein(); $("#media").fadein(); }); } i running problem when push button call function, code changes elements , fades out , in. hoping fade out text change elements , fade in. thank you!
the main problems:
- don't mix pure dom , jquery. use right tool you're doing, regardless of tools have available
- first
fadeout(), in callback, change text ,fadein().
snippet
$(function () { $("button").click(function () { $("p").fadeout(400, function () { $(this).html("second one").fadein(400); }); }); });/* start praveen's reset fiddle ;) */ * {font-family: 'segoe ui'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* end praveen's reset fiddle ;) */<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button>next</button> <p>first one</p>
Comments
Post a Comment