如何使用JQuery生成图像更改

Question

我现在有一个使用JQuery循环插件的站点。该网站使用插件改变一个主要的背景图像。循环插件还在HTML中创建了分页部分，在我的例子中，我已经将其定制为一组图像。

我试图做的是改变寻呼机的形象，一旦特定的“页面”被激活。我已经设法得到一个图像更改，但由于网站使用相当平稳的过渡，我希望有一个平滑淡出从一个图像，然后再回来。

您可以在这里看到这样的一个例子：http://pegaso.mammalworld.com/通过在“图库”图像上盘旋，您可以看到它是如何工作的。

这是我需要修改的函数，而不是Jquery使用的fadeout/fadein函数，理想情况下，它将简单地淡出到下一个图像源，然后再次淡出：

function onAfter() {

    var myclass = $( ".activeSlide" ).find('img').attr('class');
    //alert(myclass);

    switch (myclass) {
        case "image-1":
            $(".image-1").attr("src","/images/image_small_01_off.jpg");            
            $('.image-2').fadeTo('fast', 0.5, function() {
                $(this).attr("src","/images/image_small_02.jpg").fadeTo("slow", 1);
            });

        break;
        case "image-2":
            $(".image-2").attr("src","/images/image_small_02_off.jpg");
            $('.image-3').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_03.jpg").fadeTo("slow", 1);
            });                
        break;

        case "image-3":
            $(".image-3").attr("src","/images/image_small_03_off.jpg");
            $('.image-4').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_04.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-4":
            $(".image-4").attr("src","/images/image_small_04_off.jpg");
            $('.image-5').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_05.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-5":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-6":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow',1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        default :
        $(".image-1").attr("src","/images/image_small_01_off.jpg");
        $(".image-2").attr("src","/images/image_small_02_off.jpg");
        $(".image-3").attr("src","/images/image_small_03_off.jpg");
        $(".image-4").attr("src","/images/image_small_04_off.jpg");
        $(".image-5").attr("src","/images/image_small_05_off.jpg");
        $(".image-6").attr("src","/images/image_small_06_off.jpg");
        break;
    }

}

更新

要查看站点上的效果，只需在图片库上悬停并观看背景图像的变化，从而在整个过程中更改寻呼机图像。需要像背景图像一样平滑.

请帮帮忙！)

Answer 1

在你的例子中，你有两个固定的图像，这并不难。

1. 将容器背景设置为要淡出到.
2. jQuery函数的图像，以淡出图像，公开背景图像。

$(‘img’).hover(函数(){ $(this).animate({不透明度:0 }，500)；}，函数(){ $(this).animate({不透明度:1 }，500)；

小提琴

http://jsfiddle.net/v6dtE/