3

現在、ホバーにdivが表示されていますが、スライドするのではなく、ポップアップするだけです。

#home-heroImage{
  padding: 0px;
  margin: 0px auto;
  width:980px;
  height: 525px;
  position: relative;
  z-index: 1;
  background-color: #fcba2e;
}

#home-hero-pop{
  background-color: #ffffff;
  opacity:0.8;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  font: 16px Helvetica,Arial,sans-serif;
  font-weight: bold;
  color: #6d6e70;
  text-align: left;
  padding: 10px;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 505px;
  width: 460px;
  z-index: 2;
}

フィドル。

SOの投稿を調べた後、この例を見つけました。これは、下からではなく右からスライドさせることができれば機能します。JavaScriptやjQueryについてよく知らないので、このコードに加えようとした変更では、目的の効果が得られません。

$(document).ready(function(){
    $('.up-down').mouseover(function(){
        $('.default').stop().animate({
            height: 0    
        }, 200);                        
    }).mouseout(function(){
        $('.default').stop().animate({
            height: 200 
        }, 200)    
    })

});

フィドル。

私はいくつかのJavaScriptの記事をオンラインで読んでみましたが、それらは今私の頭上にあります。

4

5 に答える 5

10

あなたが与えた例に基づいて、これは右からスライドインしています..これはあなたが求めているものですか？http://jsfiddle.net/jPneT/208/

2017年編集

jQueryが多すぎます

そうです、これがCSSの代替手段です

.left-right {
    overflow:hidden;
    height:200px;
    width:200px;
    position:relative;
    background-color:#333;
}
.slider {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:-200px;
    background-color:#000;
    color:#fff;
    transition:0.4s ease;
}

.left-right:hover .slider {
  right:0;
}
<div class="left-right">
  <div class="slider">Welcome !</div>
</div>

于 2012-07-30T16:35:44.913 に答える
5

私の答えはJavaScript を使用していません。CSS はこれを自動的に処理できます。

実際の例として、コードのフォークへのリンクを次に示します: http://jsfiddle.net/g105b/Adk8r/11/

あなたの例から少しだけ変更があります。要素を非表示にしてdisplayプロパティで表示するのではなく、 right: -480px(480 は累積幅)を使用して要素を画面外に配置しright: 0、マウスがホバーしたときに要素を移動します。

CSS トランジションを使用するとアニメーションが提供され、サポートは現在非常に良好です: http://www.caniuse.com/#search=transition

この手法により、すべてのブラウザーが IE6 に戻ってWeb サイトを表示および使用できるようになりますが、古いブラウザーを使用しているユーザーのエクスペリエンスは向上しません。アニメーションが必要な場合を除き (アニメーション化するための機能であるため)、CSS トランジションを使用して Web サイトの将来を保証し、Web 標準を使用することをお勧めします。

非推奨のブラウザーのユーザーは、非推奨のエクスペリエンスを利用する価値があります。

于 2012-07-30T16:48:21.233 に答える
2

フィドル： http： //jsfiddle.net/BramVanroy/Adk8r/10/

言ったように：論理的で正しいHTMLを書くことを学んでください。マークアップは無効で非論理的です。一度にすべてのコツをつかもうとするのではなく、HTMLとCSSを完成させてから、JavaScriptとjQueryを学習する必要があります。このコードは目に苦痛です。

何が問題なのですか。

  • インラインスタイルとJavaScriptの大きな塊は避けてください。
  • 見出しタグ（）を使用するスパンを使用し、<h1>Welcome</h1>CSSを介してスタイルを設定します。

  • <br />段落を使用する場合は、改行を使用します。

    <p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>

  • コードに構造はありません。これは、機能するWebサイトを作成するために必要ではありませんが、子要素に2つまたは4つのスペースのインデントを与えることをお勧めします。このように、どの要素がどの子または親であるかが非常に明確になります。同じことがCSSルールにも当てはまります。セレクターを最初に配置してから、次のようにルール（インデント）を配置することをお勧めします。

    h1 {
    font-weight: bold;
    font-size: 160%;
}

  • 終了</a>タグがありますが、開始タグはありません<a>。

于 2012-07-30T16:36:30.970 に答える
0

css3 を使用してそれを行う非常に簡単な方法があります。面倒な JavaScript を使用する代わりに、CSS で次のようなことを試してください。

div.move {
  height: 200px;
  width: 200px;
  background:#0000FF;
  color:#FFFFFF;
  padding:10px;
}

/*on mouse hover*/
div.move:hover {
  /*General*/
  transform:translate(200px,100px);
  /*Firefox*/
  -moz-transform:translate(200px,200px);
  /*Microsoft Internet Explorer*/
  -ms-transform:translate(200px,100px);
  /*Chrome, Safari*/
  -webkit-transform:translate(200px,100px);
  /*Opera*/
  -o-transform:translate(200px,100px);
}

HTMLで：

<div class="move">Anything is here moves!</div>

また、移動は x/y 軸で機能します。

于 2012-07-30T16:42:07.247 に答える
0

これは非常に簡単です。必要なのは、HTML、CSS、および jQuery だけです。

  1. しっかりしたdivを作ります。
  2. 親の div を作成してoverflow:hidden、CSS でオーバーフロー ( ) を非表示にします。
  3. margin-leftマージンのために必要な div が隠れる 100% (またはある程度の長さ) を割り当てます。
  4. jqueryanimate()関数を実行しmargin-leftて 0 または 0% にします。
  5. ms (ミリ秒) で時間を指定するか、slowまたはfast
于 2012-07-30T16:48:08.190 に答える