divのトップポジションをx秒ごとに変更します。

Question

私は絶対配置されたdivを子と持ちます。このdivのトップポジションをx秒ごとに変更したい。私はjquery setIntervalで試しましたが、それは一度だけ変更されます。以下は私のコードです。

.com_prices { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background: #dd0d0d; 
    position: relative; 
} 
.com_tabs { 
    position: absolute; 
    height: auto; 
    width: 100%; 
} 
.com_price_tab { 
    width: 90%; 
    margin: 10px auto; 
    height: 100px; 
    background: #fff; 
} 

あなたが "-100px" にトップ等しい設定しているHTML

<div class="com_prices"> 
    <div class="com_tabs"> 
     <div class="com_price_tab"></div> 
     <div style="background: #28bc88" class="com_price_tab"></div> 
     <div style="background: #fff000" class="com_price_tab"></div> 
     <div style="background: #333" class="com_price_tab"></div> 
     <div style="background: #28bc88" class="com_price_tab"></div> 
     <div style="background: #999" class="com_price_tab"></div> 
     <div class="com_price_tab"></div> 
     <div class="com_price_tab"></div> 
    </div> 
    </div> 

スクリプト

setInterval(function() { 
    $('.com_tabs').animate({top: "-100px"}, 350); 
}, 2000); 

Answer 1

問題は、あなたが-100pxするtop位置を設定しているということです。初めて関数がトップ位置を同じ値に設定しようとすると、すでに（-100px）になっていて変更されません。 現在のトップ値を取得し、その値から100ピクセルを引くことができます。次のようなものがあります：

setInterval(function() { 
    var $el = $('.com_tabs'); 
    var top = $el.css('top'); 
     var topNumber = top.substr(0, top.length -2) - 100; 
     console.log(topNumber); 
     $el.animate({top: topNumber + 'px'}, 350); 
}, 2000); 

Answer 2

。あなたは、現在位置が100

var $comtabs = $('.com_tabs'); 
setInterval(function() { 
    var top = parseInt($comtabs.css("top")); 
    $comtabs.animate({top: top - 100 + "px"}, 350); 
}, 2000); 

の作業の例を引く取得する必要があります：

var $comtabs = $('.com_tabs'); 
 
setInterval(function() { 
 
    var top = parseInt($comtabs.css("top")); 
 
    $comtabs.animate({ 
 
    top: top - 100 + "px" 
 
    }, 350); 
 
}, 2000);

html, 
 
body { 
 
    background: #000; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.com_prices { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    background: #dd0d0d; 
 
    position: relative; 
 
} 
 

 
.com_tabs { 
 
    position: absolute; 
 
    height: auto; 
 
    width: 100%; 
 
} 
 

 
.com_price_tab { 
 
    width: 90%; 
 
    margin: 10px auto; 
 
    height: 100px; 
 
    background: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="com_prices"> 
 
    <div class="com_tabs"> 
 
    <div class="com_price_tab"></div> 
 
    <div style="background: #28bc88" class="com_price_tab"></div> 
 
    <div style="background: #fff000" class="com_price_tab"></div> 
 
    <div style="background: #333" class="com_price_tab"></div> 
 
    <div style="background: #28bc88" class="com_price_tab"></div> 
 
    <div style="background: #999" class="com_price_tab"></div> 
 
    <div class="com_price_tab"></div> 
 
    <div class="com_price_tab"></div> 
 
    </div> 
 
</div>