没有插件的Jquery交叉淡入淡出

Question

很多东西在这里指向插件做交叉淡化和东西,但没有一个真的符合我的需要.

我的页面上有两件事:一张大图片,一张包含3或4个小缩略图的div

单击缩略图时,它会读入src并将主图像源更改为新图像.

我如何让它淡入一个而另一个淡出(所以它在新图像淡入之前没有任何结果)

继承我的代码:

$('.TnImage').live('click', function() {
        var newImage = $(this).attr('src');
        var oldImage = $('.mainImage').attr('src')
        $('.mainImage').fadeOut('slow');
        $('.mainImage').attr('src', newImage).fadeIn('slow');
    });

只是为了澄清为什么我不想使用现有的插件,是大多数要求你知道要加载的图像列表,通过PHP从mysql数据库中恢复缩略图,我宁愿不必须为缩略图制作2个列表,为主要图像制作1个列表,然后隐藏除了一个主要div以外的所有图像.

我看过一个循环插件,但我最好不要使用它,我知道人们一直在继续关于不重新发明轮子,但如果我继续使用插件来做东西,我永远不会去学习坚果和jquery如何工作的螺栓.我以前使用优秀的IMAGESWITCH,但不能使用jquery 1.4.3,我需要这个版本的html数据(),所以通过以前解决这个问题,我现在卡住了,为什么我要问这样做的方法不使用插件.

Answer 1

jQuery 循环可以做到这一点，但它是一个插件。

为了在没有插件的情况下执行此操作，您可以加载图像，然后隐藏除第一个之外的所有图像。单击缩略图后，所选图像就会淡出。我会在第一个图像中添加一个 css 类，以使其更容易做到。我还会为每个图像提供一个 id 来引用它们。使用 CSS 将它们放置在彼此之上。在缩略图标签中，您还需要对大图像进行某种引用。

$('.TnImage').live('click', function() {
    $('.selected').fadeOut(500, function(){
        $(this).removeClass('selected');
    });
    $('#'+$(this).attr('imgidref')).delay(250).fadeIn('slow').addClass('selected');
});

我知道这是一个粗略的例子，但它应该涵盖基本原则。