title: Jquery animate left image css
body: <p>I'm trying to animate an image (<code>animate({left:'0'}, 500</code>); when I click each times on the newsletter menu item. This image at the beginning is defined in the css as hidden and then it must shown with animate. </p>
  
  <p>Here's the snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var
      animation = function(href) {
        var
          name = "active",
          element = $("a[href='" + href + "']"),
          $target = $(href);
  
        $("html, body").stop().animate({
          scrollLeft: $target.offset().left
        }, 1200);
  
        element.closest("ul").find("li").removeClass(name);
        element.parent().addClass(name);
  
        $('#wrap').find('.shown').removeClass('shown');
        $target.addClass('shown');
        $('#wrap').find('.shown1').removeClass('shown1');
        $target.addClass('shown1');
        //text effect
        $('#wrap').find('.load').removeClass('load');
        $target.addClass('load');
        //text translate
        $('#wrap').find('.move').removeClass('move');
        $target.addClass('move');
        //animate hide and show image right to left
        $('#myimage img3').animate({
          left: '0'
        }, 500)
      },
      menu = $("#list");
  
    animation(menu.find("li").eq(0).find("&gt; a").attr("href"));
  
    $("#cssmenu a").bind("click", function(event) {
      var target = $(this).attr("href");
  
      animation(target);
  
      //always want the fade? uncomment this:
      //$('#cssmenu').find('img').css('opacity', 0);
  
      //$(target).find('img').fadeTo(3000,1);
  
  
      event.preventDefault();
    });
  
    $("#next, #prev").click(function(event) {
      var
        positionActiveClass = menu.find("&gt; li.active").index(),
        menuLength = menu.find("&gt; li").length - 1,
        buttonId = $(this).attr("id");
  
      if (buttonId === "next") {
        if (positionActiveClass === (menuLength)) {
          newElementActiveClass = menu.find("li").eq(0);
          newPositionActiveClass = newElementActiveClass.find("&gt; a").attr("href");
  
          animation(newPositionActiveClass);
        } else {
          newElementActiveClass = menu.find("li").eq(positionActiveClass + 1);
          newPositionActiveClass = newElementActiveClass.find("&gt; a").attr("href");
  
          animation(newPositionActiveClass);
        }
      } else {
        if (positionActiveClass === 0) {
          newElementActiveClass = menu.find("li").eq(menuLength);
          newPositionActiveClass = newElementActiveClass.find("&gt; a").attr("href");
  
          animation(newPositionActiveClass);
        } else {
          newElementActiveClass = menu.find("li").eq(positionActiveClass - 1);
          newPositionActiveClass = newElementActiveClass.find("&gt; a").attr("href");
  
          animation(newPositionActiveClass);
        }
      }
  
      event.preventDefault();
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    width: 8000px;
    margin: 0;
  }
  
  .panel {
    width: 930px;
    float: left;
    padding-left: 30px;
    padding-right: 1040px;
    margin-top: 45px;
    background: #eee;
  }
  
  #banner {
    position: fixed;
  }
  
  #banner ul {
    line-height: 45px;
    margin: 0 30px;
    padding: 0;
  }
  
  #banner ul li {
    display: inline;
    margin-right: 30px;
  }
  
  #wrap {
    margin-top: 45px;
    float: left;
  }
  
  #cssmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 1366px;
    position: relative;
    display: block;
    font-size: 12px;
    font-weight: bold;
    background: #f2f1f2;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #f2f1f2;
    zoom: 1;
  }
  
  #cssmenu ul:before {
    content: '';
    display: block;
  }
  
  #cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
  }
  
  #cssmenu li {
    display: block;
    float: left;
    margin: 0;
    padding: 0 4px;
  }
  
  #cssmenu li a {
    display: block;
    float: left;
    color: #797978;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px 7px 20px;
    border-bottom: 3px solid transparent;
  }
  
  #cssmenu li a:hover {
    color: #6c8cb5;
    border-bottom: 3px solid #00b8fd;
  }
  
  #cssmenu li.active a {
    display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;
  }
  
  #cssmenu {
    position: fixed;
  }
  
  .panel img {
    opacity: 0;
    -moz-transition: opacity 3000ms ease-in-out;
    -webkit-transition: opacity 3000ms ease-in-out;
    transition: opacity 3000ms ease-in-out;
  }
  
  .shown img {
    opacity: 1;
  }
  
  .panel .img2 {
    opacity: 0;
    -moz-transition: opacity 3000ms 2s ease-in-out;
    -webkit-transition: opacity 3000ms 2s ease-in-out;
    transition: opacity 3000ms 2s ease-in-out;
  }
  
  .shown1 .img2 {
    opacity: 1;
  }
  
  #test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
    -webkit-transition: opacity 5s ease-in;
    -moz-transition: opacity 5s ease-in;
    -ms-transition: opacity 5s ease-in;
    -o-transition: opacity 5s ease-in;
    transition: opacity 5s ease-in;
  }
  
  .load #test p {
    opacity: 1;
  }
  
  #translate p {
    left: 0px;
    top: 200px;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
  }
  
  .move #translate p {
    transform: translate(350px, 0);
    -webkit-transform: translate(350px, 0);
    -o-transform: translate(350px, 0);
    -moz-transform: translate(350px, 0);
  }
  
  #myimage {
    overflow: hidden;
    position: relative;
  }
  
  #myimage .img3 {
    postion: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="cssmenu"&gt;
    &lt;ul id="list"&gt;
      &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#newsletter"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#directions"&gt;Directions &amp;amp; Opening Hours&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;button id="prev"&gt;Previous&lt;/button&gt;
    &lt;button id="next"&gt;Next&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="wrap"&gt;
    &lt;div id="home" class="panel"&gt;
      &lt;h2&gt;Home&lt;/h2&gt;
      &lt;img src="http://lorempixum.com/200/200/people/3" /&gt; &amp;nbsp;
      &lt;img class="img2" src="http://lorempixum.com/200/200/people/1" /&gt;
  
    &lt;/div&gt;
    &lt;div id="newsletter" class="panel"&gt;
      &lt;h2&gt;Newsletter&lt;/h2&gt;
      &lt;!--&lt;img src="http://lorempixum.com/200/200/people/1"/&gt;--&gt;
      &lt;div id="myimage"&gt;
        &lt;img class="img3" src="http://lorempixum.com/200/200/people/1" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="directions" class="panel"&gt;
      &lt;h2&gt;Directions&lt;/h2&gt;
      &lt;!--&lt;img src="http://lorempixum.com/200/200/people/2"/&gt;--&gt;
      &lt;div id="test"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="contact" class="panel"&gt;
      &lt;h2&gt;Contact&lt;/h2&gt;
      &lt;!--&lt;img src="http://lorempixum.com/200/200/people/4"/&gt;--&gt;
      &lt;div id="translate"&gt;
        &lt;p&gt;translate to right&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>May be, it can be done with CSS by adding or removing class, but I don't know how. I give you an example of what I'm trying to do.</p>
  
  <p>here is my HTML structure :</p>
  
  <pre><code>&lt;div id="newsletter" class="panel"&gt;
          &lt;h2&gt;Newsletter&lt;/h2&gt;
  
          &lt;div id="myimage"&gt;
          &lt;img class="img3" src="http://lorempixum.com/200/200/people/1"/&gt;            
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My css looks like this for the image:</p>
  
  <pre><code>#myimage {
      overflow:hidden;
      position:relative;
  }
  #myimage .img3 {
      postion:absolute;
  }
  </code></pre>
  
  <p>In my Jquery function, I have implemented the following script :</p>
  
  <pre><code>//animate hide and show image right to left
                  $('#myimage img3').animate({left:'0'}, 500);
  </code></pre>