2017-08-28 13 views
-1

100ミリ秒後にクラスbbbの先頭位置を変更したいのですが、.css(top)が機能しません。JQueryでのCSSの操作

助けてください。

<!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

ことができます。これはhtmlです

.container{ position:relative; } .element{ position:absolute; } 

問題が何であるか少し説明しますか?何が「うまくいかない」ということを知るのは難しいです(漠然としています) – ochi

+0

必要な構文を教えてください。 – HumbleWebDev

+1

'position:relative'を追加する必要があります。そうでなければ' top'は何もしません。 – jhpratt

答えて

0

@jhprattと同様です。 .bbbクラスにposition:relativeを追加する必要があります。

以下を参照してください。

$(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; 

を与える必要がトップ属性を使用したい場合は、既に、述べています。このようにして、要素は自分の位置に相対的に設定され、これはややこしいことになります。ちなみに私は通常、相対広告はそれで絶対配置可能要素を入れたコンテナボックスを作ることを好むので、それは彼のコンテナに相対して表示されます。

<div class="container"> 
    <div class="element"></div> 
</div> 
関連する問題