Question

我如何浮动img标签左侧的span标签？我正在尝试克隆停靠导航，但是卡住并且不知道如何解决，有人能指出我吗？

这是我的代码

$(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

我卡在该部分如何滑动侧边栏图标

左侧的内容侧边栏标题

weird bug?

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

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

将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/

Answer 3

看起来您只需要使用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/

跨度浮动的img

3 个答案: