javascript - 跨度在 img 左侧浮动

Question

如何在 img 标签左侧浮动跨度标签？我正在尝试克隆停靠导航，但卡住了，不知道如何解决，有人可以指出我吗？

这是我的代码

$(document).ready(function(){

    $('.sidebar-menu').hover(function(){
        $(this).find('span').slideToggle("fast");
    }, function(){
        $(this).find('span').slideToggle("fast");
    });

});

这是我的小提琴 http://jsfiddle.net/mzvyt/6/

试图克隆这个侧边栏 http://blog.webguruportfolio.com/2011/03/jquery-plugin-for-youtube-video-slider.html

我卡在部分我如何滑动侧边栏图标左侧的内容侧边栏标题

几次鼠标悬停/滑动后，会出现一些奇怪的线条

Answer 1

将您的 css 文件更改为

 #sidebar {
color: #fff;
background-color: #333;
width: 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 2px 0 0 2px;
-ms-border-radius: 2px 0 0 2px;
-o-border-radius: 2px 0 0 2px;
-webkit-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px;
-moz-transition: right 0.15s ease-in-out;
-ms-transition: right 0.15s ease-in-out;
-o-transition: right 0.15s ease-in-out;
-webkit-transition: right 0.15s ease-in-out;
transition: right 0.15s ease-in-out;
position: fixed;
left: -40px;
top: 124px;
z-index: 3000;}

#sidebar:hover {
left: 0px;}

Answer 2

看起来您只需要使用float和删除一些东西。

如下更新图标和标题的 CSS。我都向右浮动（这使它们并排出现）。我将标题跨度设置为display:block;并给它一个固定的高度（与图标的高度相同）。然后添加了背景颜色。

#sidebar .sidebar-item .sidebar-menu .sidebar-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    float:right;
}
#sidebar .sidebar-item .sidebar-menu .sidebar-title {
    background-color: #333;
    float:right;
    height:50px;
    display:block;
}

#sidebar我从和中删除了背景颜色.sidebar-menu。

我还更新了你的 jQuery。我推荐使用animate，因为它可以让您更好地控制动画效果。此外，您想一开始将它们全部隐藏，仅在hover.

$(document).ready(function(){
    $("#sidebar .sidebar-title").hide();
    $('.sidebar-menu').hover(function(){
        $(this).find('span').animate({width:"show"},"fast");
    }, function(){
        $(this).find('span').animate({width:"hide"},"fast");
});

http://jsfiddle.net/daCrosby/mzvyt/4/

我添加.stop(true,true)到 jQuery 的动画行中，以阻止动画在你一次击中一堆时排队。

http://jsfiddle.net/daCrosby/mzvyt/5/

Answer 3

将javascript更改为：

$('.sidebar-menu').hover(function(){
    $(this).find('span').animate({right:"20px"},"fast");
}, function(){
    $(this).find('span').animate({right:"-500px"},"fast");
});

css

#sidebar .sidebar-item .sidebar-menu .sidebar-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    position:relative;
    z-index:9999;
    background:#333;
}
#sidebar .sidebar-item .sidebar-menu .sidebar-title {
    display:block;
    position:absolute;
    top:0;
    right:-500px;
    background:#333;
    width:200px;
    height:50px;
    z-index:-9;
}

http://jsfiddle.net/mzvyt/6/