0

divユーザーが選択したときに移動したいだけです。ユーザーがリンクをクリックすると、が表示され、div右から左に移動します。次に、の中に別のリンクがありdivます。ユーザーがそれをクリックすると、はdiv左から右に移動して消えます。

以下は私が試したjQueryコードです。

$('#show').click(function(e){
    e.preventDefault();
    $('div').show().animate({ 'left': 0 }, 300;
});   

$('#hide').click(function(e){
    e.preventDefault();
    $('div').animate({'left': 2050}, 300,function() {$('div').hide()});
});

フィドルも添付、http：//jsfiddle.net/sameerast/JNBAn/

4

3 に答える 3

2

cssアニメーションに注意を払うことをお勧めします。この例を参照してください：http ：//slides.html5rocks.com/#css-transitions

于 2012-11-02T15:06:54.023 に答える
1

上記のように、これには4行目にコンマが必要です。その後、フィドルが機能し始めます。

$('#show').click(function(e){
    e.preventDefault();
    $('div').show().animate({ 'left': 0 }, 300);
});   

$('#hide').click(function(e){
    e.preventDefault();
    $('div').animate({'left': 2050}, 300,function() {$('div').hide()});
});

ちなみに、ChromeのJavaScriptコンソールはこの点で非常に役立つと思います...[表示]->[開発者]->[JavaScriptコンソール]で確認してください（この場合、予期しない;括弧がないためにエラーが表示されていました） ）。

于 2012-11-02T14:54:00.317 に答える
1

欠落している括弧の横。 これは、divを右から左に表示し、次に左から右に非表示にするように更新されたコードです。

JS :(括弧がありません）

$('#show').click(function(e){
    e.preventDefault();
    $('div').show().animate({'left': 0 }, 300);
});   

$('#hide').click(function(e){
    e.preventDefault();
    $('div').animate({'left': 2050}, 300,function() {$('div').hide()});
});  ​

CSS：

div{
    width:100px; 
    height:100px;
    background:#333;
    color:#999;
    position:absolute;
    top:10px;
    left:2050px;
    text-align:center;
    display:none;
}​

お役に立てれば！

于 2012-11-02T15:05:32.920 に答える