jquery - divの移動を停止するタイミングをアニメーションに指示するにはどうすればよいですか？Ifステートメントを使用しますか？

Question

だから私はJqueryでポジショニングを使ってタイムラインを作成しています、そしてそれを簡単に上下に動かすことができます問題はタイムラインが1943年から2020年までしか行かないことです。日付を過ぎて何も表示されなくなります。タイムラインの最後に到達したら、クリック機能を停止する必要があります。

HTML：

<aside class="timeContainer">

    <div class="timeControlUp">
        <div id="yearUp"></div>
        <div id="decadeUp"></div>
    </div>
    <div class="timeHolder">
        <div class="timeView">
            <div class="longTimeline">

<!-- Year Markers -->            
                <div class="yearMarker">1943</div><div class="yearMarker">1944</div><div class="yearMarker">1945</div><div class="yearMarker">1946</div><div class="yearMarker">1947</div><div class="yearMarker">1948</div><div class="yearMarker">1949</div><div class="yearMarker">1950</div><div class="yearMarker">1951</div><div class="yearMarker">1952</div><div class="yearMarker">1953</div><div class="yearMarker">1954</div><div class="yearMarker">1955</div><div class="yearMarker">1956</div><div class="yearMarker">1957</div><div class="yearMarker">1958</div><div class="yearMarker">1959</div><div class="yearMarker">1960</div><div class="yearMarker">1961</div><div class="yearMarker">1962</div><div class="yearMarker">1963</div><div class="yearMarker">1964</div><div class="yearMarker">1965</div><div class="yearMarker">1966</div><div class="yearMarker">1967</div><div class="yearMarker">1967</div><div class="yearMarker">1969</div><div class="yearMarker">1970</div><div class="yearMarker">1971</div><div class="yearMarker">1972</div><div class="yearMarker">1973</div><div class="yearMarker">1974</div><div class="yearMarker">1975</div><div class="yearMarker">1976</div><div class="yearMarker">1977</div><div class="yearMarker">1978</div><div class="yearMarker">1979</div><div class="yearMarker">1980</div><div class="yearMarker">1981</div><div class="yearMarker">1982</div><div class="yearMarker">1983</div><div class="yearMarker">1984</div><div class="yearMarker">1985</div><div class="yearMarker">1986</div><div class="yearMarker">1987</div><div class="yearMarker">1988</div><div class="yearMarker">1989</div><div class="yearMarker">1990</div><div class="yearMarker">1991</div><div class="yearMarker">1992</div><div class="yearMarker">1993</div><div class="yearMarker">1994</div><div class="yearMarker">1995</div><div class="yearMarker">1996</div><div class="yearMarker">1997</div><div class="yearMarker">1998</div><div class="yearMarker">1999</div><div class="yearMarker">2000</div><div class="yearMarker">2001</div><div class="yearMarker">2002</div><div class="yearMarker">2003</div><div class="yearMarker">2004</div><div class="yearMarker">2005</div><div class="yearMarker">2006</div><div class="yearMarker">2007</div><div class="yearMarker">2008</div><div class="yearMarker">2009</div><div class="yearMarker">2010</div><div class="yearMarker">2011</div><div class="yearMarker">2012</div><div class="yearMarker">2013</div><div class="yearMarker">2014</div><div class="yearMarker">2015</div><div class="yearMarker">2016</div><div class="yearMarker">2017</div><div class="yearMarker">2018</div><div class="yearMarker">2019</div>

<!-- End Year Markers -->           

            <img src="img/dateButton.png" id="dateButton1" class="dateButton" />
            <img src="img/dateButton.png" id="dateButton2" class="dateButton" />
            <img src="img/dateButton.png" id="dateButton3" class="dateButton" />

            </div>
        </div>
    </div>  

CSS：

/*---------- Start Timeline 2 ---------*/

.timeContainer { position: fixed; width: 100px; height: 90%; margin: 2% 0% 5% 0%; top: 0px; right: 30px; overflow:hidden;}

.timeControlUp { position:absolute; width: 100px; height: 50px; top: 0px; left: 0px; background-image:url(../img/timeButBG.png); z-index: 101; text-align:center;}

#yearUp { position: relative; top: 0px; left: 0px; width: 50px; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position:top left; cursor:pointer;}

#yearUp:hover { position: relative; top: 0px; left: 0px; width: 50%; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -100px 0px; cursor:pointer;}

#decadeUp { position: relative; top: -50px; left: 50px; width: 50%; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -52px 0px; cursor: crosshair;}

#decadeUp:hover { position: relative; top: -50px; left: 50px; width: 50px; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -152px 0px; cursor:pointer;}


.timeHolder { position: absolute; width: 100px; height: 100%; margin: 50px 0px 50px 0px; top: 0px; left: 0px;}

.timeView { position:absolute; width: 100%; height: 28105px; top: -24820px; left: 0px; background-image:url(../img/longTimeBG3.png); background-repeat:repeat-y; background-position: top left; z-index: 90;}

.timeControlDown { position:absolute; width: 100%; height: 50px; bottom: 0px; left: 0px; background-image:url(../img/timeButBG.png); z-index: 101;}

#yearDown { position: relative; top: 0px; left: 0px; width: 50px; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position:top left; cursor:pointer;}

#yearDown:hover { position: relative; top: 0px; left: 0px; width: 50%; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -100px 0px; cursor:pointer;}

#decadeDown { position: relative; top: -50px; left: 50px; width: 50%; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -52px 0px; cursor: crosshair;}

#decadeDown:hover { position: relative; top: -50px; left: 50px; width: 50px; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -152px 0px; cursor:pointer;}

.yearMarker { position:relative; z-index: 91; top:0px; right: 0px; width: 95px; height: 365px; text-align:right; font-family:Verdana, Geneva, sans-serif; font-weight:bold; color: #000; }


.dateButton { width: 40px; cursor:pointer;}
#dateButton1 { position:absolute; z-index: 102; top:25430px; left: 5px; width: 30px; height: 30px; text-align:right; font-family:Verdana, Geneva, sans-serif; font-weight:bold; color: #000; }
#dateButton2 { position:absolute; z-index: 102; top:24687px; left: 5px; width: 30px; height: 30px;}
#dateButton3 { position:absolute; z-index: 102; top:21212px; left: 5px; width: 30px; height: 30px;}

/*---------- End Timeline 2 ---------*/

そしてスクリプト自体：

// JavaScript Document
$(document).ready(function() {


$('#yearUp').click(function(){
    $('.timeHolder').animate({
        marginTop: '+=365px',
    }, 1000);
})
$('#yearDown').click(function(){
    $('.timeHolder').animate({
        marginTop: '-=365px',
    }, 1000);
})
$('#decadeUp').click(function(){
    $('.timeHolder').animate({
        marginTop: '+=3650px',
    }, 1000);
})
$('#decadeDown').click(function(){
    $('.timeHolder').animate({
        marginTop: '-=3650px',
    }, 1000);
})




})

Answer 1

これを機能させるためにいくつかの変更を加えました。

まず、アニメーションを変更して、のtop代わりにポジショニングを使用するようにしmarginました。次に、最後の要素（1943）の位置を見つけ、アニメーションがこの最後の位置を超えるかどうかを確認するイベントにif単純なものを入れました。clickその場合、アニメーションは起動しません。これと同じ考え方を他の機能にも適用できます。私は通常、このようなものの絶対値で作業するのは好きではありませんが、特にリストが静的である場合は、正常に機能することがあります。

http://jsfiddle.net/eqW66/9/

$('#yearUp').click(function(){
    var pos = $('.timeHolder').position();
    if (pos.top + 365 <= 24820) {
        $('.timeHolder').animate({
            top: '+=365px',
        }, 1000);
    }
});

アップデート **

残りの4つの関数については、以下のjsfiddleを参照してください。下に移動するには、>=を最小値に切り替える必要がありました。

http://jsfiddle.net/eqW66/9/

$('#yearDown').click(function(){
    var pos = $('.timeHolder').position();

    if (pos.top - 365 >= -2920) {
        $('.timeHolder').animate({
            top: '-=365px',
        }, 1000);
    }
});

$('#decadeDown').click(function(){
    var pos = $('.timeHolder').position();

    if (pos.top - 3650 >= -2920) {
        $('.timeHolder').animate({
            top: '-=3650px',
        }, 1000);
    }
});

Answer 2

top要素を初期化しているように見えますが.timeView、アニメーション化していmarginTopます。トップをアニメートするだけだと思います。次に、topが0に近づいているかどうかを確認し、そこまでアニメートすることができます。これが更新されたjsfiddleです。

イヤーアップイベントを変更しただけですが、残りは理解できるはずです。下部に近いかどうかを検出するには、現在の上部の値にコンテナの高さを加えたものを使用し、それをスクロール可能な完全な高さと比較する必要があります。

Answer 3

わかりました。初期位置を把握し、開始点から位置を減算および加算する必要があるため、次のようになります。

divの全高は28105pxでした

私の出発点は2011年（年）でした：

2011年の位置は24829pxでした

docreadyのこれは0に設定されています

したがって、どこで停止して開始するかを把握する必要があります3

スクリプトは次のとおりです。

// JavaScript Document 

$(document).ready(function() {

    $('#yearUp').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top + 365 <= 24820) {
            $('.timeHolder').animate({
                top: '+=365px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#yearDown').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top - 365 >= -2555) {
            $('.timeHolder').animate({
                top: '-=365px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#decadeUp').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top + 3650 <= 24820) {
            $('.timeHolder').animate({
                top: '+=3650px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#decadeDown').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top - 3650 >= -2555) {
            $('.timeHolder').animate({
                top: '-=3650px',
            }, 1000);
        }else{
            return false
        }
    });


});

道案内を手伝ってくれた@PJHに感謝します。申し訳ありませんが、フィドル用の画像などをこれ以上提供できませんでしたが、イントラネット内にいることはできませんでした。他のみんなの入力に感謝します