スクロールでバナー画像を横からスライド、閉じるボタンで非表示にしたい

スクロールしたら左下からバナー画像を表示させ、閉じるボタンを押したら非表示にするようなjqueryを調べながら作成しました。

問題なく動くのですが、何分初心者ですので不具合などあるか不安です。
書き方として間違っている、より良い書き方があるなどあればアドバイスを頂きたいです。

また、閉じる際はdisplay:none;で非表示になるよう設定しているのですが、これを横スライドでまた消すようにできるでしょうか？
一度試したのですが、閉じてから上まで戻って再度スクロールするとまた表示されるようになってしまい、なかなかうまくいきません。

HTML
1<div class="Bnr">
2    <a href="javascript:void(0)">
3      <p><img src="img/sample.jpg" alt=""></p>
4    </a>
5    <p class="close"><a href="javascript:void(0)">閉じる</a></p>
6  </div>

CSS
1.Bnr {
2  position: fixed;
3  bottom: 0;
4  left: -500px;
5}

jQuery
1$(function() {
2  var appear = false;
3  var display = $('.Bnr');
4  $(window).scroll(function () {
5    if ($(this).scrollTop() > 100) {
6      if (appear == false) {
7        appear = true;
8        display.stop().animate({
9          'left': '10px'
10        }, 800);
11      }
12    } else {
13      if (appear) {
14        appear = false;
15        display.stop().animate({
16          'left': '-1000px'
17        }, 800);
18      }
19    }
20  });
21  $('.Bnr p.close a').click(function () {
22    display.css('display','none');
23  });
24});