jquery - 使用 jQuery 添加图像以切换(隐藏/显示)侧边栏

Question

如何添加图像而不是 << 来隐藏左侧栏，如何添加右箭头 >> 来显示隐藏的侧栏而不是显示相同的 (<<) 箭头

http://jsfiddle.net/6FMZY/449/

Answer 1

有:http://jsfiddle.net/M6xJT/

CSS:

.left {
    background: url('http://icons.iconarchive.com/icons/pixelmixer/basic/32/left-icon.png') no-repeat;
    width: 32px;
    height: 32px;
    display:block;
}

.right {
    background: url('http://icons.iconarchive.com/icons/pixelmixer/basic/32/right-icon.png') no-repeat;
    width: 32px;
    height: 32px;
    display:block;
}

jQuery:

$('#toggle').toggle(function(){
    $('#A').animate({width:0});
    $('#B').animate({left:0});

    $(this).removeClass('left').addClass('right');
},function(){
    $('#A').animate({width:200});
    $('#B').animate({left:200});

    $(this).removeClass('right').addClass('left');
})​;