Hello.

Help with a little js code.

There are only two inputs for selecting the width and height without the form and buttons, and it is necessary that the picture smoothly changes its dimensions, which will be entered into these inputs.

    2 answers 2

    Our img:

    <img src="images/logo/icon-256.png" class="one"/>

    Option 1, With jQuery and CSS:

      $(".one").mouseenter(function() { $(this).css({ "-webkit-transition": "all 1s linear", "width": "50px", "height":"50px" }); }) .mouseleave(function() { $(this).css({ "-webkit-transition": "all 1s linear", "width": "256px", "height":"256px" }); });

    With examples about the interaction of CSS and jQuery look here .

    Option 2, without CSS:

     // increase factor var factor = 2; $('.one').click(function() { $(this).animate({ top: '-=' + $(this).height() / factor, left: '-=' + $(this).width() / factor, width: $(this).width() * factor }); });

    Here with examples about animate read.

    Ready solution, especially for the author:

    HTML

      <input type="text" size="40" class="width"> <input type="text" size="40" class="height"> <img src="images/logo/icon-256.png" class="one" />

    Jquery:

     $(".width").keypress(function(){ $(".one").css({ "-webkit-transition": "all 1s linear", "width":$(this).val(), "height": $(".height").val() }); }); $(".height").keypress(function(){ $(".one").css({ "-webkit-transition": "all 1s linear", "width":$(".width").val(), "height": $(this).val() }); });

    Of course, I understand everything, but ready-made solutions lead to laziness, and you yourself know the laziness of what, therefore, I advise you to study everything a little by yourself. And you will not save enough ready answers in programming, even so simple pieces.

    • Maybe it's better to use .on('keypress', function(){ /* code */ }); ? Animation on js is getting rid of itself, css in this regard has become much more powerful, and indeed this is a direct responsibility of css. - user31688
    • Thank you very much for responding, but I have a slightly different situation, new dimensions: width and height, are set manually through the input fields and after that the dimensions are set, the image should change its dimensions! - kiberchainik
    • @TheDoctor, the author of the post, of course, need to use keypress for an idea with my examples will not work, but they are easy to remake for my needs, in fact, I'm not a toaster to ready to give out. :) Regarding whether or not it is eliminating - a tricky question, but CSS has been working wonders lately even on its own, but with Jquery everything is very cool and the main thing is simple. - Ilja
    • @kiberchainik, look at the answer again, now there is a ready-made solution, even though I am not a supporter of the current for students, because in this way they will learn nothing. - Ilja
    • a little off topic ... typing, when you see fit, ready-made solution of the problem, do not think only about the laziness of the author of the question! Think better about how to describe your code in more detail in the comments, for many people learn this way as well !!! - kiberchainik

    I did this (did for Drupal, so jquery might need to be wrapped differently).

    html

     <img src="#" class="one" />

    jquery

     (function($) { $(document).ready(function() { $('#edit-submitted-shirina, input').bind('keyUp change', function(){ var wvalue = $('#edit-submitted-shirina').val(); $("#bagbox").attr('width', wvalue); }); $('#edit-submitted-vysota, input').bind('keyUp change', function(){ var hvalue = $('#edit-submitted-vysota').val(); $("#bagbox").attr('height', hvalue); }); }); })(jQuery);