8

ここで誰かからコードを入手しました。

私が好きなのは、右から左にスライドするdivを作成することです。つまり、右にdivを非表示にし、300pxの幅でゆっくりと左にスライドします。

HTML

<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>

CSS

#loginPanel {
    color: #000;
    cursor:pointer;
}

#userNav {
    width: 200px;
    height: 200px;
    display: none;
    background: #ff0000;
}

Jquery

// Open / Close Panel According to Cookie //    
if ($.cookie('panel') == 'open'){    
    $('#userNav').slideDown('fast');
} else {
    $('#userNav').slideUp('fast');
}

// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){        
    $('#userNav').slideToggle('fast', function(){
        if ($(this).is(':hidden')) {
            $.cookie('panel', 'closed');
        } else {
            $.cookie('panel', 'open');
        }
    });
});

これについては助けが必要です。divを右から左にスライドさせるだけです

これがフィドルですhttp://jsfiddle.net/7m7uK/195/

4

5 に答える 5

14

jQueryUIと追加のエフェクトを使用できますスライド

http://docs.jquery.com/UI/Effects/Slide

例：

$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);

http://api.jquery.com/slideToggle/から、.slideToggle（）を使用して左から右に、またはその逆にスライドすることはできません。

.slideToggle（）メソッドは、一致した要素の高さをアニメーション化します。これにより、ページの下部が上下にスライドし、アイテムが表示または非表示になります。要素が最初に表示された場合、それは非表示になります。非表示の場合は表示されます。

このコードを実装するには、コードを変更してみてください。ただし、jQueryUIを使用する必要がないよりも、@s15199dの回答を試してみる方が良いと思います。

わかりました。jsfiddleを作成しました。機能するにはjQueryUIを含める必要があります。スライドの方向には、さまざまな組み合わせがあります。

http://jsfiddle.net/7m7uK/197/

OK、クッキーで別のフィドルを作成しました

http://jsfiddle.net/7m7uK/198/

于 2013-03-27T12:44:27.840 に答える
6

JQuery-UIに依存せずに

<div>スライドするコンテンツをラッパー内に配置する必要があります<div>。次に、コンテンツdivの右マージンを負の幅に設定します。ラッパーの秘訣は、コンテンツを非表示にするように、ラッパーを非表示に設定すること<div>です。次に、jQueryのネイティブルーチンを使用して右マージンを0に設定し、コンテンツを水平方向のスライド効果で表示できます。x-overflow<div>animate()<div>

HTML：

<div id="slider-wrapper">
    <div id="slider-content">
</div>

CSS：

#slider-wrapper {
    overflow-x: hidden;
}
#slider-content {
    width:         300px;
    margin-right: -300px;
}

JavaScript：

$("#slider-button").click(function () {
    $("#slider-content").animate({ "margin-right": 0 }, "slow");
});

ハンドル<div>を使用してdivを展開および折りたたむデモは次のとおりです。http： //jsfiddle.net/gingi/KUCaL/

于 2014-04-01T18:41:16.143 に答える
3

スライドDIVを右から左へおよび左から右へ

<div class="nav ">
       <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
       </ul>
   </div>

CSS：

/*nav*/
.nav{
    position: fixed;
    right:0;
    top: 70px;
    width: 250px;
    height: calc(100vh - 70px);
    background-color: #333;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;

}
.nav-view{
    transform: translateX(0);
}

JS：

  $(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});

http://www.themeswild.com/read/slide-navigation-left-to-right

于 2016-07-22T06:12:14.280 に答える
0 
$("#DivName").animate({"left": "-=300px", "opacity":1}, "slow");
于 2013-03-27T12:40:14.423 に答える
-4

これを試しましたか？

if ($.cookie('panel') == 'open'){    
    $('#userNav').slideLeft('fast');
} else {
    $('#userNav').slideRight('fast');
}
于 2013-03-27T12:35:23.507 に答える