2

ユーザーがリンクをクリックするとdivを左から右に移動し、ユーザーが別のリンクをクリックすると右から左に移動するために使用している単純なjQueryアニメーションコードがあります。

私の問題は、ユーザーが同じリンクをクリックし続けると、div が左に移動し続けることです。一度しかクリックできないようにしたいのですが、もう一度クリックしてもリンクは何もしません。

これが私のコードです：

$(document).ready(function(){
$('a.facebook').click(function() {
    $('#social_holder').animate({'left' : '-=420px'});
});
$('a.twitter').click(function() {
    $('#social_holder').stop().animate({'left' : '+=420px'});
});
});

私が取り組んでいることの例は、ここにあります: http://www.samskirrow.com/client-bionic

ありがとう

4

2 に答える 2

2

一度だけ処理する必要があるイベントにはone()を使用します。

$('a.facebook').one('click', function() {
    $('#social_holder').animate({'left' : '420px'});
});

ボタンがクリックされた後にアニメーションを戻すように質問している場合は、左のプロパティをインクリメント/デクリメントするのではなく、リセットする必要があります。

$(document).ready(function(){
    $('a.facebook').click(function() {
        $('#social_holder').animate({'left' : '0'});
    });
    $('a.twitter').click(function() {
        $('#social_holder').animate({'left' : '420px'});
    });
});
于 2013-03-23T10:36:02.003 に答える
1

「+=420」と「-=420」を使用する代わりに、絶対位置を使用してください。

$(document).ready(function(){
$('a.facebook').click(function() {
    $('#social_holder').animate({'left' : '0'});
});
$('a.twitter').click(function() {
    $('#social_holder').stop().animate({'left' : '420px'});
});
});

これにより、div が途中で配置されることも防止されます。

于 2013-03-23T10:40:03.583 に答える