Обмен анимированными изображениями jQuery

Question

Хауди.Это снова я, и снова jQuery.

У меня есть что-то вроде этого: http://misiur.com/small/

Когда щелкнет это меню слева, я хочу изменить src этого изображения или простопоменяй местамиОднако я хочу сделать это анимированным.Пути к изображениям берутся из БД и хранятся в массиве «images» (Вы можете проверить это с помощью firebug).

спасибо

Обновление:

HTML () + PHP:

<div id="content_menu">
<ul>
<?php 
$q = $wpdb->get_results("SELECT * FROM ".$wpdb->prefix."prodcat");                                  $c = 1;                                     $id = 1;
foreach($q as $q)   
{
echo '<li class="ml'.$c.'">
<a id="e'.$id.'" href="cat/'.$q->id.'">'.$q->name.'</a>
<img src="images/split.png" alt="" />
</li>';
$id++;
$c++;
if($c == 8)
{
    $c = 1;
}
}
</ul>
</div>
<div id="product_display">
      <div id="product">
                <img id="changer" src="images/ex.jpg" style="background-image: url('images/products/cat/2.png');" alt="Przykład" />
                <div id="pmore"><a href="#">Więcej</a></div>
      </div>
</div>

JS:

<script type="text/javascript">
$(window).bind('load', function ()
{
var images = new Array();
<?php 
$q = $wpdb->get_results("SELECT id, image FROM ".$wpdb->prefix."prodcat");
foreach($q as $q)
{
echo "images[".($q->id-1)."] = 'images/products/cat/".$q->image."';\r\n";
}
?>
$('#content_menu a').click(function(e){
e.preventDefault(); 
var id = this.id.substr(1) % 7;
var i = this.id.substr(1);
$('#changer').css('background-image', images[i]);
switch(id)
{
    case 2:
        $('#product').animate({ backgroundColor: '#FFCD00' }, 500);
        $('#pmore').animate({ backgroundColor: '#FFCD00' }, 500);
    break;
    case 3:
        $('#product').animate({ backgroundColor: '#F7A604' }, 500);
        $('#pmore').animate({ backgroundColor: '#F7A604' }, 500);
    break;
    case 4:
        $('#product').animate({ backgroundColor: '#9A05E8' }, 500);
        $('#pmore').animate({ backgroundColor: '#9A05E8' }, 500);
    break;
    case 5:
        $('#product').animate({ backgroundColor: '#096EE3' }, 500);
        $('#pmore').animate({ backgroundColor: '#096EE3' }, 500);
        break;
    case 6:
        $('#product').animate({ backgroundColor: '#24A205' }, 500);
        $('#pmore').animate({ backgroundColor: '#24A205' }, 500);
    break;
    case 0:
        $('#product').animate({ backgroundColor: '#D41E0C' }, 500);
        $('#pmore').animate({ backgroundColor: '#D41E0C' }, 500);
    break;
    case 1:
        default:
        $('#product').animate({ backgroundColor: '#44B2EE' }, 500);
        $('#pmore').animate({ backgroundColor: '#44B2EE' }, 500);
}
$('#changer').cross();

});});

Кстати.теперь щелчок не работает

Answer 1

@ Мизиур

извините, ссылка, которую вы разместили, содержит синтаксическую ошибку javascript, она написана следующим образом

var images = new Array();
 images[] = 'images/products/cat/1.jpg';
 images[] = 'images/products/cat/2.png'; 

Думаю, что-то вроде этого

var images = new Array();
 images[0] = 'images/products/cat/1.jpg';
 images[1] = 'images/products/cat/2.png';

Извините, если я ошибаюсь (или) вводит вас в заблуждение

Answer 2

Что-то вроде это ?