スルっと出現したり消える機能

Question

＜行いたいこと＞

①カーソルがfooterの領域に入ったら<p class="box"></p>の項目がスルって出現する。
（パっと出るのではなく、下からスルっと出るようにしたいです。）

②カーソルが<div class='footer'></div>以外の領域に入ったら<p class="box"></p>の内容が消える。
（下へスルっと消えるイメージです。）

＜条件＞

bodyに記述してあるのは、下記のみです。
（カスタマイズで使用したいため。body内には直接記述ができないという条件です。）

<p class="box">テストテストテストテストテストテストテストテストテストテスト</p>

そのため、まずjsで<div class='footer'></div>の親要素を作りました。

$(".box").wrap("<div class='footer'></div>");

やってみたこと

<script>

 $('.footer').hover(function() {
		$(".box").removeClass("slide");
  });
	 $('    ').hover(function() {
		$(".box").addClass("slide");
  });
</script>

.footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 72px 0;
  background-color: #dadada;
}
.box{
  background-color: #a9a9a9;
  padding: 40px 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.box.slide{
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0); 
  transform: translate3d(0, 100%, 0); 
}

これだとパっと出現してしまいますし、

<div class='footer'></div>以外の領域に入ったらという時の下記の記述をどうすれば良いか分かりません。

$(' ').hover(function() {
$(".box").addClass("slide");
});

もしよろしければご教授お願いいたします。

Comments

[m.ts10806]

期待する動きを実現しているサイトを提示された方が良いかと思います（というかそこからコード持ってくるのが一番早い）

Answer 1

これで対応しました。ありがとうございます。
$(".box").wrap("<div class='footer'></div>");
$(".footer").hover(
function () {
$(".box").removeClass("slide");
},
function () {
$(".box").addClass("slide");
}
);

Answer 2

jQueryを利用しているならslideUp,slideDownでよいと思いますが
.boxをいくら.footerで囲っても、.box自体が非表示になっていれば
カーソルを.footerに乗せることはできないでしょう。
下からスルッとではなくopacityを調整して非表示からもわっとでてくる
感じがよいのでは？

※途中できれてたので更新しました

Comments

[kei344]

回答の最後が切れてしまっているようです。