如何使用两个箭头图标为div设置动画一个用于打开一个是关闭？

Question

我正在使用jquery动画在中间做一些div动画我可以继续使用任何一个帮助。

我的要求是当我点击箭头图标div应该动画。在动画div折叠后，需要显示左侧箭头以关闭折叠位置。

我添加了两个图像，一个用于打开，另一个用于关闭。

JsFiddle Link

http://jsfiddle.net/CZpdF/1/

Answer 1

$("#buying-power-right, #buying-power-left").click(function() {
    $(this).attr('id', function() {
        return this.id == 'buying-power-right' ? "buying-power-left" : "buying-power-right";
    });
    $("#buying-power-content").animate({
        width: 800
    }, {
        queue: false,
        duration: 200
    }).toggle();
});

<强> DEMO

Answer 2

#buying-power-content有display:none;

您必须在点击活动中展示它。

$("#buying-power-content").show().animate({width:800}, { queue: false, duration: 200 });