Jquery 让Div滑出并单击返回

我有一个销售信息侧边栏，我想在点击时滑出并返回。现在它将滑出，但一旦我单击它一次，它就不会滑回。如果有人能找出为什么代码不能工作，那就太好了

此外，我希望div在悬停时稍微向左移动，但仅当它一直向左移动时。我这样做是为了让它更引人注目，它可以被点击

以下是html：

<div id="sidebar">
<div id="sales">
    <div id="salesbar">
        <img id="sales_img" src="/images/sales.png"/>
            <h3>Contact Sales</h3>
            <p>
                For more information 
                please email us or call:
            </p>
        </div>    
    </div>
</div>

总而言之，我想点击一下销售栏，让它弹出并停留在那里。然后，当您再次单击它时，返回到它开始的位置。如果可能的话，如果你将鼠标悬停在5px以上，然后在离开的时候返回，那就太好了

下面是带有css的JSFIDLE：

---

《高级》中的“谢谢”

不完全确定这是否是您想要的效果，但看看这是否有帮助

    $(document).ready(function () {
    var sales = $('#sales', '#sidebar'),
        image = $('#sales_img', '#salesbar'),
        rt = sales.css('right');
    image.click(function (event) {
        if (rt == '0px' || rt == '5px') {
            sales.animate({
                'right': '235px'
            }, 600);
        } else {
            sales.animate({
                'right': '0px'
            }, 600);
        }
        event.preventDefault();
    });
    image.hover(function () {
        if (sales.css('right') == '0px') {
            sales.css('right', '5px');
        }
    });
    $('#sales').mouseleave(function () {
        var pos = sales.css('right').substr(0, sales.css('right').length - 2);
        if (pos > 5) sales.animate({
            'right': '0px'
        }, 600);
    });
});

小提琴：

---

让它起作用了。感谢@Baps的悬停和@dragonslovetacos的点击功能

以下是我的观点：

$(document).ready(function() {
        var sales = $('#sales', '#sidebar'),
            image = $('#sales_img', '#salesbar'),
            rt = sales.css('right');


  image.click(function() {
    var $marginLefty = $('#sales');
    $marginLefty.animate({
      right: parseInt($marginLefty.css('right'),10) === 5 ?
        $marginLefty.outerWidth()-image.outerWidth(true) :
        0
    });
  });

image.hover(
    function () {
    if (sales.css('right') == '0px') {
        sales.css('right', '5px');
    }
    }, function() {
    if(sales.css('right') == '5px') {
        sales.css('right','0px');
        }
    }
    );        
});

---

@dragonslovetacos这是一个正确的想法，但我仍然想要一些前后显示的内容。另外，我希望动作发生在元素本身上。@dragonslovetacos经过一段时间的混乱之后，这个链接起了一点作用。我只是没能得到我用来帮忙的悬停。太棒了。我知道这并不完全是你想要做的，但我想这可能会帮助你摆脱困境。非常感谢。我没有使用你的点击功能，但是有条件的鼠标悬停效果很好。因为hover函数有两个参数，所以我在第二个参数中添加了另一个when mouseleave条件。

$(document).ready(function() {
        var sales = $('#sales', '#sidebar'),
            image = $('#sales_img', '#salesbar'),
            rt = sales.css('right');


  image.click(function() {
    var $marginLefty = $('#sales');
    $marginLefty.animate({
      right: parseInt($marginLefty.css('right'),10) === 5 ?
        $marginLefty.outerWidth()-image.outerWidth(true) :
        0
    });
  });

image.hover(
    function () {
    if (sales.css('right') == '0px') {
        sales.css('right', '5px');
    }
    }, function() {
    if(sales.css('right') == '5px') {
        sales.css('right','0px');
        }
    }
    );        
});