0

矢印の形をした div をクリックすると、2 つの div が作成されました。非表示の div がスライドして表示されます。フォーラムに投稿されたフィドルの 1 つに似ています。何らかの理由で機能していません。

これは私がこれまでに行ったことです: Fiddel の助けは大歓迎です。

html

<div id="slideout">
<div id="containclickme">
    <div class="metro three-d" id="click-me"></div>
</div>
</div>

CSS

 body {
direction:rtl;
}
#slideout {
background: #666;
position: relative;
width: 300px;
height: 80px;
right:-300px;
margin-top:50px;
top:100%;
bottom:100%;
}
.metro {
display: inline-block;
padding: 5px;
margin: 50px;
width:1px;
height:19.5px;
background: #117ebb;
color: white;
font-weight: bold;
text-decoration: none;
}
.metro.three-d {
position: relative;
box-shadow: 1px 1px #003355, 2px 2px #003355, 3px 3px #003355;
transition: all 0.1s ease-in;
}
.metro.three-d:active {
box-shadow: none;
top: 3px;
left: 3px;
}
.metro.three-d:after {
 transition: all 0.1s ease-in;
position:absolute;
top:0px;
left:-13px;
content:" ";
width: 0;
height: 2px;
border-top: 13px solid transparent;
border-bottom: 15px solid transparent;
border-right:13px solid #117ebb;
border-radius:0px 0px 0px 20px;
}
#containclickme {
background: transparent;
float:left;
height:100%;
bottom:100%;
width:20px;
margin-top:-25px;
}
#click-me {
position:right;
left:30px;
}

jquery

 $(function () {
 $("#clickme").toggle(function () {
    $(this).parent().parent().animate({
        right: '0px'
    }, {
        queue: false,
        duration: 500
    });
 }, function () {
    $(this).parent().parent().animate({
        right: '-300px'
    }, {
        queue: false,
        duration: 500
    });
  });
 });
4

2 に答える 2

2

あなたはとても近かったです;）！

http://jsfiddle.net/zxu7w/

$(function () {
    // cache the sliding object in a var
    var slideout = $('#slideout');
    // "click-me" is what is in your html not "clickme"
    $("#click-me").toggle(function () {
        // use cached object instead of searching
        slideout.animate({
            right: '0px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        // use cached object instead of searching        
        slideout.animate({
            right: '-300px'
        }, {
            queue: false,
            duration: 500
        });
    });
});
于 2013-03-11T17:03:23.857 に答える
0

間違ったIDを使用しているため、機能していません

使いました$("#clickme")

そのはず$("#click-me")

その変更でコードをもう一度確認してください。それは魅力のように機能します

于 2013-03-11T17:09:24.830 に答える