title: jquery animate coding cant get it to work
body: <p>I have a slideshow that uses the Jquery cycle plugin. example of slideshow is at <a href="http://collaborativebydesign.com.au/demos/exposure/index.php/design-portfolio/logos" rel="nofollow">http://collaborativebydesign.com.au/demos/exposure/index.php/design-portfolio/logos</a></p>
  
  <p>The slideshow works and the navigation scrolls from page to page but my client wants the navigation active link to slide from page to page. So i have been trying to use Jquery .animate to enable this</p>
  
  <pre><code>$activeSlide.animate({
          left : currSlide * 150
      }, 400, 'swing');
  </code></pre>
  
  <p>but this doesnt seem to be working. I have tried placing it in a js file and putting the script tag into my head. i have also tried placing the script onto the page. How can i get my navigation links to smoothly transition from page to page</p>
  
  <p>this is the php file that creates the slideshow</p>
  
  <pre><code>    &lt;?php defined('_JEXEC') or die('Restricted access'); // no direct access
  
  /**
   * LV ENHANCED image slider - An AJAX image slider
   *
   * @version 1.0
   * @package LV ENHANCED image slider
   * @author Juergen Koller
   * @copyright (C) http://www.lernvid.com
   * @license GNU/GPL: http://www.gnu.org/copyleft/gpl.html
   *
   **/
  
  
      // set width of nav 
      $lveisnav_width = $lveisWidth - 10;
  
      // math the height if nav active    
      if ($useNav == 1) {
          $lveis_height = $ulHeight + $navHeight; 
      }
      else {
          $lveis_height = $ulHeight; 
      };          
  
      // slider background color
      if ($transparentBgColor == 1) {
          $sliderBg = 'transparent';
      }
      else {
          $sliderBg = '#'.$lveis_bgcolor;
      };          
  
  
  // get the document object
  $doc =&amp; JFactory::getDocument();
  
  // style declaration
  $doc-&gt;addStyleDeclaration( '
  html {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
  } 
  #container {
      width: 716px;
      height: 510px;
      padding:0 !important;
      margin:0 auto !important;
      top:0px;
      position: relative;
      z-index:1;
  }
  h1 {
      display:block;
      width:716px;
      height:505px;
      margin: 0 auto;
      top:0px;
      position: relative;
      background-image: url(../../modules/mod_center_image_slider/images/layer.png);
      z-index:10;
  }
  #lveis-wrapper_'.$slider_id.' {
      display:block;
      width: 716px !important;
      height: 505px !important;
      position: absolute;
      top:0px;
      z-index: 60;
  }
  #lveis-wrapper_'.$slider_id.' ul#lveis {
      height: '.$ulHeight.'px !important;
  }
  #lveis-wrapper_'.$slider_id.' ul#lveis, #lveis-wrapper_'.$slider_id.' ul#lveis li {
      width:400px;
      height: '.$ulHeight.'px !important;
      list-style-type:none;
      overflow:hidden;
  }
  #lveis-wrapper_'.$slider_id.' .lveisnav {
      width: 716px !important;
      height: 37px !important;
      background:#white !important;
      border:0px solid #'.$lveisnav_bordercolor.' !important;
      padding:4px !important;
      display:inline-block;
      display:block;
      overflow: hidden;
      position:absolute;
      top:506px;
      left:0px;
      z-index:50;
  }
  #lveis-wrapper_'.$slider_id.' .lveisindex a {
      float:left;
      width:16px; 
  }
  #lveis-wrapper_'.$slider_id.' .lveisindex a:hover {
      width:16px; 
  }
  #lveis-wrapper_'.$slider_id.' .lveisnav .prev, #lveis-wrapper_'.$slider_id.' .lveisnav .next {
      float:right;
      display:block;
  }
  #lveis-wrapper_'.$slider_id.' .lveisnav .next a {
      display:block;
      width:36px;
      height:35px;
      border:0px;
      background: url(../../modules/mod_client_image_slider/images/next.jpg) no-repeat;
       }
  #lveis-wrapper_'.$slider_id.' .lveisnav .next a:hover, a:focus {
      background-position: 0 -35px;
       }
  #lveis-wrapper_'.$slider_id.' .lveisnav .prev a {
      display:block;
      width:36px;
      height:35px;
      border:0px;
  
      background: url(../../modules/mod_client_image_slider/images/prev.jpg) no-repeat;
      }      
  #lveis-wrapper_'.$slider_id.' .lveisnav .prev a:hover, a:focus{
      background-position:0 -35px
      }   
  #lveis-wrapper_'.$slider_id.' .lveisnav a {
      color:#'.$lveisnav_a.' !important;
      border:0px solid #'.$lveisnav_aborder.' !important;
      font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", "Arial Black", sans-serif;
      font-weight:700;
      font-stretch:normal;    
      font-size:14px !important;
      padding:0 3px !important;
      margin:2px;
      text-decoration:none;
      text-align:center;
  }
  #lveis-wrapper_'.$slider_id.' .lveisnav a:hover {
      color: #'.$lveisnav_ahover.' !important;
  }
  #lveis-wrapper_'.$slider_id.' .lveisindex a.activeSlide {
      top: 506;
      left: 0;
      width: 15px;
      height: 25px;
      background-color: #807E7D;
      background-color: rgba(128, 126, 125, .1);
      -webkit-border-radius: 1px;
      -moz-border-radius: 1px;
      border-radius: 1px;
  }
  #lveis-wrapper_'.$slider_id.' #lveis img, #lveis-wrapper_'.$slider_id.' #lveis a {
      border:0 !important;
      outline:0 !important;
      margin:0 !important;
      padding:0 !important;
  }
  #lveis-wrapper_'.$slider_id.' .lveisnav-clr {
      clear:both;
  }
  '  );
  ?&gt;
  
  
  &lt;?php if ($useCompression == 0) {?&gt;
      &lt;script src="modules/mod_center_image_slider/js/jquery.js" type="text/javascript"&gt;&lt;/script&gt; 
      &lt;script src="modules/mod_center_image_slider/js/jquery.dimensions.js" type="text/javascript"&gt;&lt;/script&gt; 
      &lt;script src="modules/mod_center_image_slider/js/jquery.center.js" type="text/javascript"&gt;&lt;/script&gt; 
      &lt;script src="modules/mod_center_image_slider/js/functions.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="modules/mod_center_image_slider/css/style.css" type="text/css" media="screen" /&gt;  
     &lt;?php }; ?&gt;
  &lt;?php if ($useCompression == 1) {?&gt;
  
      &lt;script src="modules/mod_center_image_slider/js/jquery.js" type="text/javascript"&gt;&lt;/script&gt; 
      &lt;script src="modules/mod_center_image_slider/js/jquery.dimensions.js" type="text/javascript"&gt;&lt;/script&gt; 
      &lt;script src="modules/mod_center_image_slider/js/jquery.center.js" type="text/javascript"&gt;&lt;/script&gt; 
      &lt;script src="modules/mod_center_image_slider/js/functions.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="modules/mod_center_image_slider/js/js_compress.php"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="modules/mod_center_image_slider/css/style.css" type="text/css" media="screen" /&gt; 
  
  &lt;?php }; ?&gt;
  
  &lt;script type="text/javascript"&gt; 
      var jQlveis = jQuery.noConflict(); 
      jQlveis(document).ready(function() {
          jQlveis('#lveis-wrapper_&lt;?php echo $slider_id; ?&gt; ul#lveis').cycle({
              fx: '&lt;?php echo $effectFx; ?&gt;',
              random: &lt;?php echo $random; ?&gt;,
              timeout: &lt;?php echo $timeout; ?&gt;,
              speed: &lt;?php echo $speed; ?&gt;,
              next: '#lveis-wrapper_&lt;?php echo $slider_id; ?&gt; .lveisnav .next',
              prev: '#lveis-wrapper_&lt;?php echo $slider_id; ?&gt; .lveisnav .prev',
              pager:'#lveis-wrapper_&lt;?php echo $slider_id; ?&gt; .lveisindex',
              height: &lt;?php echo $ulHeight; ?&gt;,
              pause: &lt;?php echo $pause; ?&gt;
          });
      });
  &lt;/script&gt;
  &lt;?php if ($imageCentered == 1) {echo'&lt;center&gt;';}; ?&gt;
      &lt;noscript&gt;You need Javascript enabled in your browser to see sliding images...&lt;/noscript&gt;
      &lt;?php if ($useModalbox == 1) {
          JHTML::_('behavior.mootools');
          JHTML::_('behavior.modal');
      };?&gt;
      &lt;div id="container"&gt;
          &lt;h1&gt;&lt;/h1&gt;
          &lt;div id="lveis-wrapper_&lt;?php echo $slider_id; ?&gt;"&gt;
          &lt;div class="centered"&gt;
          &lt;ul id="lveis"&gt;
              &lt;?php 
                  $files = glob($imageFolder . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE); 
                  for ($i=0; $i&lt;count($files); $i++) 
                  { 
                      $num = $files[$i];
                      echo '&lt;li&gt;';
                      if ($uselinks == 1) {
                          if ($stretchImages == 1) {
                              echo '&lt;a class="modal" href="'.$num.'" target="'.$linktarget.'"&gt;&lt;img src="'.$num.'" alt="'.$num.'" width="'.$imageWidth.'" height="'.$imageHeight.'" /&gt;&lt;/a&gt;';
                          }
                          else {
  
                              echo '&lt;a class="modal" href="'.$num.'" target="'.$linktarget.'"&gt;&lt;img src="'.$num.'" alt="'.$num.'" /&gt;&lt;/a&gt;';
                          };
                      }
                      else {
                          if ($stretchImages == 1) {
                              echo '&lt;img src="'.$num.'" alt="'.$num.'" width="'.$imageWidth.'" height="'.$imageHeight.'" /&gt;';
                          }
                          else {
                              echo '&lt;img src="'.$num.'" alt="'.$num.'" /&gt;';
                          };
                      };          
                      echo'&lt;/li&gt;'; 
                  } 
              ?&gt;
          &lt;/ul&gt;
             &lt;/div&gt;
          &lt;?php if ($useNav == 1) {?&gt;
              &lt;div class="lveisnav"&gt;
                  &lt;?php if ($nextbutton == 1) {?&gt;
                      &lt;div class="next"&gt;
                      &lt;a href="javascript:void(0);"&gt;&lt;/a&gt;
                       &lt;/div&gt;
                  &lt;?php }; ?&gt;
                  &lt;?php if ($prevbutton == 1) {?&gt;
                      &lt;div class="prev"&gt;
                      &lt;a href="javascript:void(0);" &gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;?php }; ?&gt;
                  &lt;?php if ($lveisindex == 1) {?&gt;
                      &lt;div class="lveisindex"&gt;&lt;/div&gt;
                  &lt;?php }; ?&gt;
              &lt;/div&gt;
  
          &lt;?php }; ?&gt;     
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="lveisnav-clr"&gt;&lt;/div&gt;
  
  &lt;?php if ($imageCentered == 1) {echo'&lt;/center&gt;';}; ?&gt;
  </code></pre>