每隔x秒製作div頂端位置

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; 
} 

的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

的問題是，你設置top位置-100px。在函數第一次嘗試將頂部位置設置爲相同的值（-100px）之後，因此不作任何改變。 您可以獲取當前的最大值並從值中減去100px。例如：

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

你設置頂部等於 「-100px」。你需要獲得當前位置減去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>