jQueryを使用して絶対配置要素の「上」のCSSを変更する

Question

私はposition：absoluteを使用しているdiv（#slider）を持っています。ラッパーコードを壊さずに画面の幅に広げることができます。しかし、jQueryのslideToggleを使用して「仕事」divをクリックすると切り替えるメニューがあります。絶対配置された要素の "top"プロパティを調整して、メニューが下に移動するときに下に移動するようにしたいと思います。

これはこれは、すべてのトップの位置はすべてのために適切に適用されますので、これは明らかにjQueryを介して、クリックによってトリガCSSはそれでメディアクエリを持っている必要があります、適応メディアクエリを使用しているhttp://osephj.com/dev/

でライブ見ることができます画面サイズ。

は今、メニューを切り替えるための私が持っているコードはこれです：

<script type="text/javascript"> 
$(document).ready(function() { 
$('#worktoggle').click(function(){ 
    $('div.slider').css('top', 700); 
    $('div.work').slideToggle(600,'swing'); 
    return false; 
    }); 
}); 
</script> 

これは今.slider div要素を再配置されるが、私は、各メディアサイズの値を変更できるようにする必要があります。また、メニューが降りる600スピードでの "スイング"トランジションに合わせたいと思います。基本的に、それが、同じ親要素の私の「仕事」ULに従ったブロック要素だった場合、どのように行動するのでしょうか？

Answer 1

cssおそらくあなたの探している方法です。要素に独自のクラスを追加する

$('#').css('top', 1000); 

またはaddClassとremoveClass。

slideDownのアニメーション方法を見てみてください。

このコードをクリック機能内に追加するには、onclickを変更する必要があります。

$('#worktoggle').click(function(){ 
    $('div.toMove').css('top', 100); 
    $('div.work').slideToggle(600,'swing'); 
    return false; 
});