jQuery 动画图像交换

Posted 2023-05-08

【中文标题】jQuery 动画图像交换

【英文标题】：jQuery animated image swap

【发布时间】：2011-03-11 21:13:06

【问题描述】：

你好。又是我，又是 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"  />
</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');"  />
                <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();

); );

顺便说一句。现在点击不起作用

【问题讨论】：

我认为直接在此处发布您的代码是个好主意，这样可以使问题自成一体，从而对通过搜索引擎到达这里的未来路人更有用。到那时，您链接到的测试页面很可能不再存在，从而使问题本身毫无用处。

【参考方案1】：

@Misiur

很抱歉，您发布的链接包含一个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';

如果我错了（或）误导了你，请原谅

【参考方案2】：

类似this？

【讨论】：

嗯，我试过了，但是我对它有了新的想法。我会告诉我是否发现了什么。