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/

您的示例只有一点点变化。不是隐藏元素并使用属性显示它，而是使用（其中 480 是累积宽度）display将元素放置在屏幕外，并在鼠标悬停时将其移动到。right: -480pxright: 0

使用 CSS 过渡提供动画，现在支持非常好：http: //www.caniuse.com/#search=transition

此技术允许所有浏览器返回 IE6查看和使用您的网站，但使用旧浏览器的用户不会获得增强的体验。除非您需要动画 - 例如，它是动画的一项功能 - 我建议使用 CSS 过渡来确保您的网站不会过时并使用网络标准。

弃用浏览器的用户应该得到弃用的体验。

于 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>

  • 您的代码中没有结构。这不是创建一个工作网站所必需的，但是给子元素两个或四个空格的缩进是一个很好的做法。这样，您自己就很清楚哪个元素是哪个子元素或父元素。您的 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:hiddenCSS 中的溢出（）。
  3. 分配一个margin-left100%（或某个长度）的 div，由于边距而隐藏了所需的 div。
  4. 执行 jqueryanimate()函数以降低margin-left到 0 或 0%。
  5. 您还可以通过以毫秒（毫秒）为单位给出时间或一些表达式来设置动画的slow速度fast
于 2012-07-30T16:48:08.190 回答