jQuery左边距不起作用

Question

I'm trying to animate a div to basically slide left and move out of view, but it's simply not working and i can't figure out why. I've added the code below and, of course, i've included the jQuery script.

HTML

<div class="site-main" id="main">

<div class="main-content" id="main-content">
    <div class="closeContent"><i class="fa fa-times"></i></div>
    <div class="content-area" id="primary">

        <article class="post-22 page type-page status-publish hentry" id="post-22">

           <div class="innerRightCol">
               <h2>Text</h2>
           </div>

        </article><!-- #post-## -->
    </div><!-- #primary -->
</div><!-- #main-content -->

</div>

CSS

.site-main {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
    margin-left: 255px;
    position: relative;
    top: 0;
    width: 560px;
}

JS

$(document).ready(function() {
    $(".closeContent").click(function (){
        $(".main-content").animate({"margin-left": '-=255px'});
    });
});

Answer 1

.closeContent为空白，除非添加一些文本或为div提供宽度和高度，否则您无法单击。