title: Change images dynamically inside a div within effect with jquery
body: <ol>
  <li><p>I have four divs that hold images</p>
  </li>
  <li><p>I am using an effect that flips a card, this is currently working, <a href="http://jsfiddle.net/fUsPh/7/" rel="nofollow noreferrer">here is the fiddle</a>
  so you can see what I mean.</p>
  </li>
  <li><p>Now I would like to change the image for each div every time the user is over the image.
  To do this I created four arrays</p>
  <pre><code>var arrFirstYellowCard = [&quot;http://i.jootix.com/r/Flower-1920x1080.jpg&quot;, &quot;http://7art-screensavers.com/screenshots/wet-flowers/incredible-orange-flower.jpg&quot;, &quot;http://www.hdwallpapers.in/walls/big_yellow_flower-HD.jpg&quot;];
  var arrSecondPurpleCard = [&quot;http://www.dazzlewallpapers.com/wp-content/uploads/2012/07/Lotus-Flower-5.jpg&quot;, &quot;hhttp://7art-screensavers.com/screenshots/wet-flowers/wet-violet-flower.jpg&quot;];
  var arrThirdVectorFlower = [&quot;http://0.tqn.com/d/rubberstamping/1/0/6/m/-/-/flower-outline.png&quot;, &quot;http://openclipart.org/people/PeterM/PeterM_Flower_2.svg&quot;];
  var arrfourthCrazyArt = [&quot;http://www.bitrebels.com/wp-content/uploads/2012/11/electrocuted-flowers-robert-buelteman-1.jpg&quot;, &quot;http://loadpaper.com/large/Flowers_wallpapers_251.jpg&quot;];
  </code></pre>
  </li>
  </ol>
  <p>for instance for the first div:</p>
  <pre><code>&lt;section class=&quot;card-container&quot;&gt;
      &lt;div class=&quot;card over&quot; data-direction=&quot;right&quot;&gt;
          &lt;div class=&quot;front&quot;&gt;
              &lt;h2&gt;yellow flowers&lt;/h2&gt;
  
              &lt;h4&gt;(Right)&lt;/h4&gt;
  
          &lt;/div&gt;
          &lt;div class=&quot;back&quot;&gt;
              &lt;img src=&quot;CHANGE IMAGE DYNAMICALLY USING ARRAY arrFirstYellowCard&quot; width=&quot;100%;&quot; height=&quot;100%;&quot; alt=&quot;&quot; /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>How would I dynamically change the image from the arrays for each div depending on if user is hovering over the card?</p>
  <p>so the</p>
  <ol>
  <li>first time users hovers the div changes first image in array and is displayed</li>
  <li>second time users hovers the div, second image is changed by second image addres in array...</li>
  </ol>
  <p>Please take a look at my fiddle. How would I add this functionality?</p>
  <h1>UPDATE:</h1>
  <p>Following answer advices I have done:</p>
  <pre><code>var arrFirstYellowCard = [&quot;http://7art-screensavers.com/screenshots/wet-flowers/incredible-orange-flower.jpg&quot;, &quot;http://www.hdwallpapers.in/walls/big_yellow_flower-HD.jpg&quot;];
  var arrSecondPurpleCard = [&quot;http://www.dazzlewallpapers.com/wp-content/uploads/2012/07/Lotus-Flower-5.jpg&quot;, &quot;hhttp://7art-screensavers.com/screenshots/wet-flowers/wet-violet-flower.jpg&quot;];
  var arrThirdVectorFlower = [&quot;http://0.tqn.com/d/rubberstamping/1/0/6/m/-/-/flower-outline.png&quot;, &quot;http://openclipart.org/people/PeterM/PeterM_Flower_2.svg&quot;];
      
          
  $(function () {
      $('.over').hover(function () {
          
          if ($(this).attr('data-direction') == 'right') {
              $(this).addClass('flipping-right');
          }   
          if ($(this).attr('data-direction') == 'left') {
              $(this).addClass('flipping-left');
          }
          
      }, function () {
          if ($(this).attr('data-direction') == 'right'){    
              $(this).removeClass('flipping-right');
              var img = $(this).find('img');
              setTimeout(function() {
                 img.attr('src', arrFirstYellowCard[i]);
                 i++;
                 if(i &gt; arrFirstYellowCard.length-1)
                    i=0;
             }, 800);
          }
          if ($(this).attr('data-direction') == 'left'){    
              $(this).removeClass('flipping-left');
              var img = $(this).find('img');
              setTimeout(function() {
                 img.attr('src', arrSecondPurpleCard[i]);
                 i++;
                 if(i &gt; arrSecondPurpleCard.length-1)
                    i=0;
             }, 800);
          }
          
          
      });
  })
  </code></pre>
  <p>But it does not seem to work, could someone help me out with this issuem <a href="http://jsfiddle.net/fUsPh/28/" rel="nofollow noreferrer">here is the fiddle</a></p>