0

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

サイドバーアイコンのコンテンツサイドバータイトルをスライドさせる方法の部分で立ち往生しています

変なバグ？

数回マウスオーバー/スライドすると、奇妙な線が表示されます

4

3 に答える 3

0

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;}
于 2013-06-07T17:38:11.467 に答える
0

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/

于 2013-06-07T17:46:39.440 に答える
0

floatいくつかのものを使用して削除するだけでよいようです。

アイコンとタイトルの CSS を次のように更新します。両方を右にフロートさせました (これにより、2 つが並んで表示されます)。タイトル スパンを に設定し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/

于 2013-06-07T18:06:31.020 に答える