0

一緒に並んだ 5 つのサムネイルと、それらを上下にスライドさせる 2 つの矢印があります。今のところ、上に 2 回、下に 2 回クリックできます。それだけです。何も動きません。私の目標は、戻って何度も上下にクリックできるようにすることです。

http://jsfiddle.net/acfS6/

$('#tmbDown').css ('opacity', '.6');

var timesClickedUp = 0;     

$('#tmbUp').bind('click', function (event) {

  $("#tmbHolder").animate({"marginTop": "-=100px"}, "slow");
  timesClickedUp++;

  if (timesClickedUp >= 2) {
    $(this).unbind(event);
    $('#tmbDown').css ('opacity', '1');
    $('#tmbUp').css ('opacity', '.6');    

  }

});


var timesClickedDown = 0;

$('#tmbDown').bind('click', function (event) {

  $("#tmbHolder").animate({"marginTop": "+=100px"}, "slow")
  timesClickedDown++;

  if (timesClickedDown >= 2) {
    $(this).unbind(event);    
    $('#tmbDown').css ('opacity', '.6');
    $('#tmbUp').css ('opacity', '1');
  }



});
​
4

2 に答える 2

1

あなたが見逃したかもしれない最大のことは、下矢印をクリックしたときに、timesClickedUpをデクリメントする必要があることです。その逆も同様です。

次に、対応する「timesClicked」値の値に基づいて、両方の矢印をフェード/表示する必要があります。

これが私がそれをした方法です：

http://jsfiddle.net/acfS6/2/

var timesClickedUp = 0,
    timesClickedDown = 2;

function updateOpacities() {
    var $tmbUp = $('#tmbUp'),
        $tmbDown = $('#tmbDown');

    timesClickedUp >= 2 ? $tmbUp.css('opacity', '.6') : $tmbUp.css('opacity', '1');
    timesClickedDown >= 2 ? $tmbDown.css('opacity', '.6') : $tmbDown.css('opacity', '1');
}

// Call updateOpacities to initialize the arrows.
updateOpacities();

$('#tmbUp').bind('click', function(event) {

    if (timesClickedUp < 2) {
        $("#tmbHolder").animate({
            "marginTop": "-=100px"
        }, "slow");
        timesClickedUp++;
        timesClickedDown--;
    }

    updateOpacities();
});



$('#tmbDown').bind('click', function(event) {

    if (timesClickedDown < 2) {
        $("#tmbHolder").animate({
            "marginTop": "+=100px"
        }, "slow")
        timesClickedDown++;
        timesClickedUp--;
    }
    updateOpacities();
});​
于 2012-11-30T20:32:59.877 に答える
1

これを確認してください。小さなバリエーション: http://jsfiddle.net/wghk8/

var timesClickedUp = 0;


$('#tmbUp').bind('click', function(event) {

if (timesClickedUp < 2) {
    $("#tmbHolder").animate({
        "marginTop": "-=100px"
    }, "slow");
    timesClickedUp++;
}
else {

    $("#tmbHolder").animate({
        "marginTop": "+=" + (timesClickedUp * 100) + "px"
    }, "slow");
    timesClickedUp = 0;
}
});
var timesClickedDown = 0;

$('#tmbDown').bind('click', function(event) {
if (timesClickedDown < 2) {
    $("#tmbHolder").animate({
        "marginTop": "+=100px"
    }, "slow")
    timesClickedDown++;
}
else {
    $("#tmbHolder").animate({
        "marginTop": "-=" + (timesClickedDown * 100) + "px"
    }, "slow");
    timesClickedDown = 0;
}
});​
于 2012-11-30T19:49:07.510 に答える