2017-08-28 42 views
-1

我想在100毫秒後更改類bbb的頂部位置,但它取出了.css(頂部)不起作用。使用CSS,在JQuery頂部propery

請幫忙。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="jquery-3.2.1.min.js"></script> 
</head> 
<body> 

    <div class="ddd"><div class='bbb'>Bobobo</div></div> 

</body> 
<script>  
    $(function myFunction() { 
    setInterval(alertFunc, 100); 
    }); 

    function alertFunc() { 
    var b = $('.bbb').first(); 
    b.css('top', 100 + 'px'); 
    } 
</script> 
</html> 
+1

燦你更好地解釋一下問題是什麼?很難知道什麼「不起作用」的意思(這是模糊的) – ochi

+0

從我能告訴你有什麼需要的語法。 – HumbleWebDev

+1

您需要添加'position:relative',否則'top'什麼也不做。 – jhpratt

回答

0

就像@jhpratt提到的一樣。您需要將position:relative添加到.bbb課程中。

見下文。

$(function myFunction() { 
 
    setTimeout(alertFunc, 500); 
 
}); 
 

 
function alertFunc() { 
 
    var b = $('.bbb').first(); 
 
    b.css('top', 100 + 'px'); 
 
}
.bbb { 
 
    position: relative; 
 
    border: 1px solid red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div class="ddd"> 
 
    <div class='bbb'>Bobobo</div> 
 
</div>

1

你應該用這種方式alertFun()將只運行一次setTimeout()而不是setInterval()

let alertFunc = function() { 
 

 
    $('.bbb').css('top', 100 + 'px'); 
 

 
} 
 

 
setTimeout(alertFunc, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="ddd"> 
 
    <div class='bbb'>Bobobo</div> 
 
</div>

0

正如其他人已經說過,如果你想使用頂部的屬性,你需要給

position:relative; 

的元素。這樣,元素將相對於他的位置設置,這可能有點棘手。順便說一句我平時比較喜歡做一個集裝箱箱相對廣告投入絕對定位的元素在裏面,所以它會相對於他的容器中顯示:

.container{ 
    position:relative; 
} 

.element{ 
    position:absolute; 
} 

這是HTML:

<div class="container"> 
    <div class="element"></div> 
</div>