changing image opacity in jquery mobile -



changing image opacity in jquery mobile -

bellow effort alter opacity of image using slider widget in jquery mobile. far code nil happens. wrong code? thank

the script:

<!doctype html> <html> <head> <title>base template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.mobile-1.1.0.min.js"> $(document).ready(function(){ $('#slider-0').click(function(){ $("img").fadeto(1000,0.4); }); }); </script> </head> <body> <div data-role="header"> <h3>change image opacity</h3> </div> <div data-role="content" class="ui-content"> <label for="slider-0">input slider:</label> <input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100" /> <img src="images/int-mountain-day.jpg" /> </div> </body> </html>

you need hear onchange event , utilize input value set new opacity:

$(function() { $('#slider-0').change(function () { $("img").stop(true).fadeto(1000, this.value / 100); }); });

note: need split value 100 fit in 0-1 range. need stop running opacity animations .stop method.

demo: http://jsfiddle.net/xzssb5y6/1

upd. @omar in comments makes valid point instead usual $(function() {}) document ready wrapper, it's more reliable utilize jquery mobile pagecreate event:

$(document).on("pagecreate", "#page2", function () { $('#slider-0').change(function () { $("img").stop(true).fadeto(1000, this.value / 100); }); });

jquery jquery-mobile

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -