جی کوئری افزایش width تگ div با هر بار فشردن کیبرد

[unid_user 57]

سلام و درود

دوستان گرامی ، میخوام با فشردن هر کدوم از کلیدهای کیبورد ، width یک تگ div خاص رو هربار 5 پیکسل افزایش بدم. کد زیر رو خودم نوشتم ولی کار نمیکنه.

var barWidth = $("#run-bar").width();
  var barwidthplus = barWidth++;
  $("form#home-search-form input[type='text']").keypress(function() {
    barwidthplus++;
    alert(barwidthplus);
    $("#run-bar").css('width', 'barwidthplus + %');
  });

با تشکر و سپاس

ویرایش شده در 22 اسفند توسط unid_user

[unid_user 57]

در 7 دقیقه قبل، unid_user گفته است :

سلام و درود

دوستان گرامی ، میخوام با فشردن هر کدوم از کلیدهای کیبورد ، width یک تگ div خاص رو هربار 5 پیکسل افزایش بدم. کد زیر رو خودم نوشتم ولی کار نمیکنه.

یافتم 

var barWidth = $("#run-bar").width();
  var barwidthplus = barWidth;
  $("form#home-search-form input[type='text']").keypress(function() {
    barwidthplus++;
    alert(barwidthplus);
    $("#run-bar").css('width', barwidthplus+"5%");
  });

 

[unid_user 57]

در 10 دقیقه قبل، unid_user گفته است :

یافتم 

var barWidth = $("#run-bar").width();
  var barwidthplus = barWidth;
  $("form#home-search-form input[type='text']").keypress(function() {
    barwidthplus++;
    alert(barwidthplus);
    $("#run-bar").css('width', barwidthplus+"5%");
  });

 

مشکلی که کد بالا داره با افزایش width صفحه سایت اسکرول میخوره که شاید یکی از راه هاش overflow برابر hiden هست. اما اگه همین کد رو بخوام بهتر بنویسم به صورت زیر درمیاد.

var barWidth = $("#run-bar").width();
  var barwidthplus = barWidth;
  $("form#home-search-form input[type='text']").keypress(function() {
    barwidthplus++;
    $("#run-bar").css('width', barwidthplus+"%");
    if (barwidthplus == 100) {
      barwidthplus = 0;
    }
  });

البته برای روان تر شدن افزایش width تگ div مورد نظر در قسمت css از transition استفاده کردم.