Question

如果没有图像，这将有点难以解释，但与我无关。

我想创建以下操作：

当您将鼠标移动到固定在屏幕左侧的导航栏中的一段文本上时，将从左侧滑出第二段文本（或图像，如果更容易）的页面。第二个文本或图像将位于第一个文本或图像之下（可能的效果偏移）。在鼠标移开时，上面的效果会反转，你只剩下第一段文字。

我希望这是有道理的，我一直在拖网过渡并悬停在网络上的效果，但我无法找到我所设想的。

感谢您的帮助，吉米

Answer 1

这里有一些我为你而敲的一些例子。它使用jQuery：

HTML ：

<div class="text">
    <a>Text One</a>
    <a>Text Two</a>
</div>

CSS ：

.text{
    width:200px;
    position:relative;
}

.text > a{

    position:relative;
    left:-100%;
    display:none;

}

.text > a:first-child{

  left:0;
  display:block;

}

JavaScript ：

$(document).ready(function(){ // here we're only running the code when the page is ready

    $('.text > a:first-child').hover(function(){ // here we're targeting the first .text element

      $(this).siblings().css('display', 'block'); // we're making it visible
      $(this).siblings().animate({'left':'0%'}); // we're animating it out of it's hidden state

    }, function(){ // this function is passed as the second argument to the 'hover' method

      $(this).siblings().animate({'left':'-100%'}, 500, function(){ // animate back to hidden state

        $(this).css('display', 'none'); // when the animation is complete, hide it completely

    });
  });
});

这里是jsFiddle的working example。

显然，这个概念可以优化/发展......

悬停链接时滑入链接

1 个答案: