jquery - 画像の幅を 50px ずつ増やします

Question

複数回表示される画像がありますが、表示されるたびに画像の幅を 50px ずつ増やす必要があります。

私はjQueryでこれを達成しようとしましたが、現時点では運がありません。間違っているアイデアはありますか?

コンテンツの各ビットを取得するためにループする HTML は次のとおりです。

<div class="hideme">
    <h3 class="text-white"><?php the_sub_field('whatcanwedo_stats_number'); ?></h3>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/tash5.png" alt="tash5" class="what-can-we-do-tash" />
    <p><?php the_sub_field('whatcanwedo_stats_content'); ?></p>
</div>

そして、私が持っているjQueryは次のとおりです。

var w = 50;
var newWidth;
// what can we do tash
$('.what-can-we-do-tash').each(function(){
    newWidth === w;
    $(this).attr('width',newWidth);
    w+50;
});

ただし、これは何もしていないようです:(

Answer 1

使用する必要があります.css()：

$('.what-can-we-do-tash').css('width', function(i){
    return $(this).width() + (i * 50);
});

ここで動作しています: http://jsfiddle.net/wDpvV/1/

Answer 2

コールバックの 2 番目の引数は古い幅です。したがって、これは機能します：

$('.what-can-we-do-tash').width(function(i,width){
    return width + i * 50
});

Answer 3

のようにしてみてください

$('.what-can-we-do-tash img').each(function(){
    newWidth === w;
    $(this).css('width',newWidth+50);
    w+50;
});

またはのようにしてみてください

$('.what-can-we-do-tash').each(function(){
    newWidth === w;
    $(this).css('width',newWidth+50);  //Or directly $(this).width(newWidth+50);
    w+50;        
});