Question

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

$('.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元素。

然而，有没有办法动画整个序列，以便卸载旧图片和加载新图片只需单击一次就可以了，而不是我必须按两次鼠标？

非常感谢，

vnayak

Answer 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');
});

Answer 2

您可以为此编写一个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/

Answer 3

您可以在一次点击中组合两种动画，如下例所示：

$(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

鼠标单击时的图像转换

3 个答案: