Question

我正在尝试创建一种效果，其中LP记录（我们称之为背景图像）从记录套筒（前景图像）后面滑出。我想尽可能多地使用CSS，但是我知道将LP滑入和滑出将需要JQuery。前景图像完全遮盖了背景图像，我无法弄清楚当将鼠标悬停在前景图像上时如何移动背景图像。如果可能的话，我也希望这两个图像成为锚点。希望这很清楚（ish）！如果有人能帮助我，我会非常感激，谢谢！

这是我到目前为止的工作

<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;
}

编辑：

感谢大家的答案，我正在尝试使用第一篇comment中给出的那篇文章，但我不能为我的生活让它自己工作！谁能帮我看看我哪里出错了？再次感谢。

<!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;
}

Answer 1

您可以通过将其添加到现有代码中来完全使用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来制作动画。

Answer 2

从这开始：

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

在悬停时，记录滑出，如果鼠标离开套筒，它会向后滑动。你想拥有什么，你必须自己编码。

以下是演示：http://jsfiddle.net/rniestroj/nZhbg/

Answer 3

欢迎使用StackOverflow。

一般来说，我们希望用户在向我们询问答案之前发布他们尝试过的代码，但这里有一些让您开始使用悬停：

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

动画：

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

或许请查看animation和selectors的这些文档。

你可以用CSS3动画做到这一点，但我已经给你了jQuery，它将支持跨浏览器，并且如果你愿意，你可以让你做更复杂的事情。

如何在悬停的另一个背后滑出一个图像？

3 个答案: