通过Toggle事件更改图片

Question

我有两张照片。一个arrow_right.png和arrow_left.png。我只想显示一张图片。如果单击，则切换到另一张图片。你能告诉我怎么用jQuery的toggle()函数吗？因为它把我的照片藏起来了。

Answer 1

$('img').toggle(
    function () {
        $(this).attr('src', 'arrow_left.png');
    },
    function () {
        $(this).attr('src', 'arrow_right.png');
    }
);

.toggle()文档：http://api.jquery.com/toggle

这是一个演示：http://jsfiddle.net/dQZfh/

更新

您还可以通过使用.animate()或一些预先构建的动画来为每个图像之间的更改设置动画：

$('img').toggle(
    function () {
        $(this).stop().fadeTo(250, 0, function () {
            $(this).attr('src', 'http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg').fadeTo(250, 1);
        });
    },
    function () {
        $(this).stop().fadeTo(250, 0, function () {
            $(this).attr('src', 'http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg').fadeTo(250, 1)
        });
    }
);

请注意，我使用了fadeTo的回调函数，仅在图像完全淡出后才更改源。

这是一个演示(淡入淡出)：http://jsfiddle.net/dQZfh/1/

这是一个演示(幻灯片)：http://jsfiddle.net/dQZfh/2/