0

LP レコード (背景画像と呼びます) がレコード スリーブ (前景画像) の後ろから滑り出す効果を作成しようとしています。できるだけ多くの CSS を使用してこれを行いたいのですが、LP をスムーズにスライドインおよびスライドアウトするには JQuery が必要であることを理解しています。前景画像が背景画像を完全に覆い隠しており、前景画像の上にカーソルを置いたときに背景画像を移動する方法がわかりません。また、可能であれば両方の画像をアンカーにしたいと考えています。うまくいけば、それは明らかです（っぽい）！誰かが私を助けることができれば、私は非常に感謝しています、ありがとう!

ここに私がこれまでに取り組んでいるものがあります

<div id="container">
  <img src="Record.png" width="200" height="200" id="record"/>
  <img src="Sleeve.png" width="200" height="200" id="sleeve" />
</div>

<!--CSS-->
#container {
    background-color: aqua;
    width: 500px;
    height: 400px;
    position: relative;
}

#record {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
}

#sleeve {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 10;
}

編集：

答えてくれてありがとう、私はこの投稿への最初のコメントで与えられたものを使用しようとしていますが、私は自分でそれを機能させることはできません! 誰かが私が間違っているところを見るのを手伝ってくれますか? 再度、感謝します。

<!DOCTYPE html>
<html>

        <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="testing.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<body>

<div id="container">
  <img src="http://cdn1.iconfinder.com/data/icons/oldschool_babasse/Png/Hardware/CD%20oldSchool.png" width="200" height="200" id="record"/>
  <img src="http://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Box_Grey.png" width="200" height="200" id="sleeve" />
</div>​

<script>

$('#container').hover(function() {
    var record = $('img:eq(0)', this);
    record.stop(1,0).animate({
        left: '200px'
    }, 1000, function() {
        record.css('z-index', 11).stop(1, 0).animate({
            left: '0px'
        }, 1000);
    });
}, function() {
    var record = $('img:eq(0)', this);
    record.stop(1,0).animate({
        left: '200px'
    }, 1000, function() {
        record.css('z-index', 1).stop(1, 0).animate({
            left: '0px'
        }, 1000);
    });
});​

</script>

</body>
</html>

<!--CSS-->

#container {
    width: 400px;
    height:200px;
    position: relative;
    overflow:auto;
}

#record {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
}

#sleeve {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 10;
}​
4

3 に答える 3

2

これを既存のコードに追加することで、純粋にcssでそれを行うことができます：

#record {
  -webkit-transition: left 0.5s ease-out; 
     -moz-transition: left 0.5s ease-out; 
      -ms-transition: left 0.5s ease-out; 
       -o-transition: left 0.5s ease-out; 
          transition: left 0.5s ease-out;
}

#container:hover #record {
    left: 100px;  /* This is assuming you want it to slide from left-to-right */
}

残念ながら、アニメーションは新しいブラウザーでのみ機能します。古いブラウザでは、レコードが飛び出して表示されるだけで、これは恐ろしい効果である場合とそうでない場合があります。

すべてのブラウザーで動作するようにするには、JavaScript を使用してアニメーションを実行する必要があります。

于 2012-06-01T19:41:09.433 に答える
1

これから始めます：

$("#sleeve").hover(
    function(){
       $("#record").animate({left: '+=100',bottom: '+=100'}, 1750);
    },
    function(){
       $("#record").animate({left: '-=100',bottom: '-=100'}, 1750);  
    });

ホバーするとレコードがスライドし、マウスがスリーブから離れるとスライドして戻ります。正確に必要なものは、自分でコーディングする必要があります。

ここにデモがあります：http://jsfiddle.net/rniestroj/nZhbg/

于 2012-06-01T19:49:14.067 に答える
0

スタックオーバーフローへようこそ。

一般的に、私たちはユーザーが答えを求める前に試したコードを投稿することを望んでいますが、ここでホバーを始めるための何かがあります:

$("selector").hover(function(){
  //do some code on hover
});

そしてアニメーション付き：

$("selector").animate({
  //animate to these values
  left:250px,
});

おそらく、アニメーションとセレクターについては、これらのドキュメントを参照してください。

CSS3 アニメーションでこれを行うことができるかもしれませんが、クロス ブラウザーをサポートし、必要に応じてより複雑なことを実行できるようにする jQuery を提供しました。

于 2012-06-01T19:41:39.477 に答える