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.
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
Post a Comment