DIV動態位置與jQuery

-1

我正在創建一個項目來創建一個網站，我需要3個div出現/消失時勾選一些複選框（每div一個）。我在這裏做了一個例子：http://jsbin.com/okevuy/1/edit 我的問題（解釋相當複雜）是，我希望第一個打勾的DIV出現在頂部（不管先觸發哪一個），下一個打勾的DIV出現在第一個。如果第一個隱藏是通過取消勾選複選框，第二個隱藏在頂部，下一個勾出現在下面，等等...... 有人可以幫助做到這一點，並告訴我如何？非常感謝！DIV動態位置與jQuery

來源

2013-06-13 user2478662

如果他們的第一個你要在第二留在頂部還是應該第一個複選框拿第一名和第二向下移動之前，第二個被選中？ –

最好是，如果可能的話，我希望它低於另一個 – user2478662

試試這個

標記：添加一個包裝周圍的箱子

<div id="mianwrapper" > 
    <div id='red_div' class='divs'></div> 
    <div id='blue_div' class='divs'></div> 
    <div id='green_div' class='divs'></div> 
</div>

腳本：

$(document).ready(function() { 
$('#checkbox_red_div').click(function() { 

    if ($(this).is(':checked')){ checkPosition("red_div"); $('#red_div').show(10); $('#red_div').animate({ 
     'opacity': '1', 
      'margin-left': '0px' 

    }, 300)} 
    else $('#red_div').animate({ 
     'opacity': '0', 
      'margin-left': '-80px', 
      "display":"none" 


    }, 300 , function(){$('#red_div').fadeOut(100)}); 
}); 
$('#checkbox_blue_div').click(function() { 

    if ($(this).is(':checked')) { checkPosition("blue_div"); $('#blue_div').show(10); $('#blue_div').animate({ 
     'opacity': '1', 
      'margin-left': '0px' 
    }, 300)} 
    else $('#blue_div').animate({ 
     'opacity': '0', 
      'margin-left': '-80px', 

    }, 300 , function(){$('#blue_div').fadeOut(100)}); 
}); 
$('#checkbox_green_div').click(function() { 
    checkPosition("green_div"); 
    if ($(this).is(':checked')){ $('#green_div').show(10); $('#green_div').animate({ 
     'opacity': '1', 
      'margin-left': '0px' 
    }, 300)} 
    else $('#green_div').animate({ 
     'opacity': '0', 
      'margin-left': '-80px', 

    }, 300 , function(){$('#green_div').fadeOut(100)}); 
}); 

function checkPosition(getBox) 
{ 
    $("#"+getBox).appendTo("#mianwrapper"); 
} 

});

個定製CSS：在CSS小變化

#red_div{ 
    border:solid 1px red; 
    width:100px; 
    height:50px; 
    opacity:1; 
    float:left; 
    clear:left; 
} 

#blue_div{ 
    border:solid 1px blue; 
    width:100px; 
    height:50px; 
    opacity:1; 
    float:left; 
    clear:left; 
} 

#green_div{ 
    border:solid 1px green; 
    width:100px; 
    height:50px; 
    opacity:1; 
    float:left; 
    clear:left;

}

來源

2013-06-13 08:25:29

謝謝，它就像一個魅力！謝謝其他人的回答！ – user2478662

這怎麼http://jsbin.com/okevuy/5/

示例代碼

$('#red_div').animate({ 
       'height': '50', 
       'opacity': '1', 
       'margin-left': '0px' 
     }, 300); 
     else $('#red_div').animate({ 
       'height': '0', 
       'opacity': '0', 
       'margin-left': '-80px' 
     }, 300); 
    });

來源

2013-06-13 07:17:33 ShibinRagh

這有助於我是的，謝謝，但是有可能將最後一次檢查的位置放在已顯示的其他位置下面？ – user2478662

我不理解兄弟.. – ShibinRagh

沒關係，Shinov T的回答成就了它，感謝您的時間花花公子！ – user2478662

我已經編輯您的例子：http://jsbin.com/okevuy/7/edit。覈實。改變了什麼：「height：50px」如果div可見，否則height：0px。希望它能解決您的問題。

來源

2013-06-13 07:24:40

由於您只是移動它們而不是隱藏它們，它仍然佔用空間。你可以嘗試隱藏/顯示DIV當動畫完成：

if ($(this).is(':checked')) $('#red_div').show().animate({ 
     'opacity': '1', 
      'margin-left': '0px' 
    }, 300); 
    else $('#red_div').animate({ 
     'opacity': '0', 
      'margin-left': '-80px' 
    }, 300, function(){ $(this).hide();}); 
});

http://jsfiddle.net/WqbH4/

來源

2013-06-13 07:51:08 Edward

DIV動態位置與jQuery

回答

相關問題