lukeseager lukeseager - 1 year ago 63
Javascript Question

Increment image width by 50px

I have an image that appears multiple times, but I need the image width to increment by 50px each time it appears.

I've tried to accomplish this with jQuery, but I'm having no luck at the moment, any ideas where I'm going wrong?

The HTML that loops through to get each bit of content is:

<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>

And the jQuery I have is:

var w = 50;
var newWidth;
// what can we do tash
newWidth === w;

However this doesn't seem to be doing anything :(

Joe Joe
Answer Source

You should use .css():

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

Here it is working: