0

我正在实现一个图片库，如果您单击图片缩略图，它会向您显示更大的图片。但是，我正在尝试使图像从当前在屏幕上可见的图像过渡。我目前拥有的代码如下所示：

$('.box8').click(function(){
    $('#myMainPicture').animate({
        opacity:'toggle'}, 1000, 'linear', function() {
             $('#myMainPicture').attr("src", "thmb/pics/7.jpeg");
        });
    });

$('.box2').click(function(){
    $('#myMainPicture').animate({
        opacity:'toggle'}, 1000, 'linear', function() {
             $('#myMainPicture').attr("src", "thmb/pics/1.jpeg");
        });
    });

});

当我单击元素 .box8 时，当前的#myMainPicture 图片元素会按照“toggle”的值很好地消失，而不管屏幕上当前存在什么。如果我现在再次单击它，它将显示在 src 属性中定义的图片。

这同样适用于 .box2 元素。

但是，有没有一种方法可以为整个序列设置动画，以便只需单击一下即可卸载旧图片并加载新图片，而不是我必须按两次鼠标？

非常感谢，

夫纳亚克

4

3 回答 3

1

尝试将代码拆分为可重用的函数。

function animateTransition($image, newSrc){
    $image.animate({
       opacity:'toggle'}, 1000, 'linear', function() {
          if(newSrc){
             $image.attr("src", newSrc);
             animateTransition($image,null);
          }
    });
};
$('.box').on('click',function(){
    animateTransition($('#myMainPicture'),'thmb/pics/7.jpeg');
});
于 2013-05-19T12:20:00.720 回答
1

您可以为此编写一个 jquery 插件，并根据需要将该插件应用于任何图像

$.fn.animateTransition = function(callback,newsrc){
    var done = 0;
    var nb = this.length;
    function endAnim(){ if(++done === nb  && callback !== undefined) callback(); }
    this.each(function(){
        var $t = $(this);
        var src = newsrc;
        if(src === undefined || src === false)
            src = $t.data("src");
        if(src === undefined || src === "")
            return endAnim();
        $t.animate({opacity:0},1000,'linear',function(){
            $t.attr("src",src).animate({opacity:1},1000,'linear',endAnim);
        });
    });

    return this;
};

http://jsfiddle.net/r043v/DhBvW/2/

于 2013-05-19T13:23:43.413 回答
0

您可以一键组合两个动画，如下例所示：

$(document).ready(function () {
    var images = $('img.box'),
        main = $('#myMainPicture');
    main.prop("src", $(images[0]).attr('src')); // initialize main image
    images.click(function () {
        var src = $(this).attr('src');
        main.stop().animate({
            opacity: 0 // fade out
        }, 1000, 'linear', function () {
            main.prop("src", src);
            main.animate({ opacity: 1 }); // fade in
        });
    });
});

jsfiddle

于 2013-05-19T13:13:20.057 回答