Div在其他div的消失時移動到中心

我對jquery比較陌生，我正在製作一個簡單的網站。它有三個框，所有這些，點擊後，其他兩個將.fadeOut('slow');。問題是，所有的盒子周圍都有<center>標籤。比方說，我點擊左邊的框。中間和右邊的方塊將.fadeOut('slow')，但左邊的塊漂浮到中間。如果中間進行順利，我會很好，但不是。Div在其他div的消失時移動到中心

這裏的的jsfiddle：http://bit.ly/19PUmS5

來源

2013-10-17 user2620851

加$（元素）.attr（「風格」，「顯示：塊; visibility：hidden的;」）。此代碼將使這些框看起來不可見，但會像他們仍在那裏一樣行事。一個更復雜的動畫將不得不用於動畫div到中心。 –

@steph什麼可能是更復雜的動畫？這對我來說不起作用... – user2620851

我通過在其中一個淡出功能中調用它來獲得此代碼的工作。使這個代碼更清潔。你應該使用多重選擇IE $（「＃two，#three」）。fadeOut（「slow」，function（）{/ *完成淡入淡出時調用* /}）你也可以嘗試給予相同的延遲所有你的淡入淡出，這將解決中心問題。 –

呼叫與可見性設置爲隱藏一個完整的動作功能：

$ele.fadeOut('slow', function() { 
    $ele.css("display", "initial").css("visibility", "hidden"); 
})

來源

2013-10-18 00:03:44 megawac

沒有爲我工作... – user2620851

您應該使用.fadeTo而不是.fadeOut。然後，您將需要稍微改變你的代碼，隱藏和顯示你的<center>

Fiddle

來源

2013-10-18 00:22:10

我想對你的關鍵是使用fadeTo（）整個的JavaScript。 fadeTo（）不會將其從文檔中取出，因此您將避免將其他方塊跳轉到新位置。

此外，我簡化了你的JavaScript一點。還有一件事：<center>標籤在html5中已棄用。儘量避免使用它。讓我知道你的想法！

HTML：

<body> 
    <div id="clickableContainer"> 
    <div class="clickable" id="one"></div> 
    <div class="clickable" id="two"></div> 
    <div class="clickable" id="three"></div> 
    </div> 
    <article class="slider" style="display:none;" id="1"><div class="back">Back</div> 
    </article><article class="slider" style="display:none;" id="2"><div class="back">Back</div> 
    </article><article class="slider" style="display:none;" id="3"><div class="back">Back</div> 
    </article> 
</body>

的Javascript：

$(document).ready(function(){ 
    $('#one').on("click",function(){ 
     $("#two, #three").delay(300).fadeTo(300,0, function(){ 
      $('#one').delay(1000).fadeTo(300,0,function(){ 
       $("#one, #two, #three").css("display","none"); 
       $('#1').delay(1900).fadeTo('slow', 1); 
      });       
     }); 
    }); 
    $('#two').on("click",function(){ 
     $("#one, #three").delay(300).fadeTo(300,0, function(){ 
      $('#two').delay(1000).fadeTo(300,0,function(){ 
       $("#one, #two, #three").css("display","none"); 
       $('#2').delay(1900).fadeTo('slow', 1); 
      });      
     }); 
    }); 
    $('#three').on("click",function(){ 
     $("#one, #two").delay(300).fadeTo(300,0, function(){ 
      $('#three').delay(1000).fadeTo(300,0,function(){ 
       $("#one, #two, #three").css("display","none"); 
       $('#3').delay(1900).fadeTo('slow', 1); 
      });     
     }); 
    }); 
    $('article').on("click",function(){ 
     $(this).fadeTo(300,0,function(){ 
      $(this).css("display","none"); 
      $('#one, #two, #three').delay(800).fadeTo(300,1); 
     });   
    }); 
});

http://jsfiddle.net/itsmikem/nU8hC/3/

來源

2013-10-18 00:34:06 itsmikem

這工作完美。現在唯一的辦法是把三個盒子放在父母的中心。 – user2620851

你可以發佈父母的代碼和隨行的css嗎？我很樂意提供幫助。 – itsmikem

Div在其他div的消失時移動到中心

回答

相關問題