當動畫發生時將圖像保存在其位置

我有一個圖像網格，當你點擊一個圖像時，除了點擊的圖像之外的所有圖像都會向下移動。我的問題是，當我這樣做時，剩下的圖像被拉到左上角。我想這是因爲我刪除了圖像，以便使它被放置在網格當動畫發生時將圖像保存在其位置

$(document).ready(function() { 

    $('#grid li').click(function() { 
    $(this).siblings().animate({opacity: 0, top:'15px'},1000); 
    $(this).siblings().fadeOut(function() { 
    }); 
    }); 

$('#hidden').click(function() { 
    $('#grid li img').animate({width:'339px',height:'211px'}); 
    $('#grid li').siblings().fadeIn(); 
    $('#grid li').siblings().animate({opacity: 1, top:'0px'},1000); 
     }); 
    });

HTML

<div class="portfolio"> 
    <ul id="grid"> 
    <li><a href="#"><img src="1.jpg"><span>some text></a></li> 
    <li><a href="#"><img src="2.jpg"><span>some text></a></li> 
    <li><a href="#"><img src="3.jpg"><span>some text></a></li> 
    <li><a href="#"><img src="4.jpg"><span>some text></a></li> 
    <li><a href="#"><img src="5.jpg"><span>some text></a></li> 
    <li><a href="#"><img src="6.jpg"><span>some text></a></li> 
    <li><a href="#"><img src="7.jpg"><span>some text></a></li> 
    <li><a href="#"><img src="8.jpg"><span>some text></a></li> 
    <li><a href="#"><img src="9.jpg"><span>some text></a></li> 
     </ul></div> 
<div id="hidden">

CSS

ul#grid { 
    list-style: none; 
    top: 0; 
    margin: 60px auto 0; 
    width: 1200px; 
    } 

#grid li span { 
    color: white; 
    display:block; 
    bottom:250px; 
    position:relative; 
    width:180px; 
    } 

#grid li { 
    float: left; 
    margin: 0 40px 75px 0px; 
    display:inline; 
    position:relative; 
}

的1位剩下的一個是不是考慮的唯一一個

JSFIDDLE

來源

2013-07-23 Wanting to learn

你對你的問題的想法是正確的，但你喜歡什麼來實現呢？ – hyde

我想將圖片保留在原始位置。我嘗試了一些jquery獲取當前圖像的位置並使用它來保存它，但事情變得瘋狂;圖像飛過來。 –

最簡單的方法是不使用fadeOut（）使其設置display：none，這就是爲什麼圖像被移動的原因。

$('#grid li').click(function() { 
    // $(this).siblings().css("position","relative"); 
    $(this).siblings().animate({opacity: 0, top:'15px'},1000, function() { 
    // Animation complete. 
     $('#grid li img').animate({width:'339px',height:'211px'}); 
    }); 
});

FIDDLE

來源

2013-07-23 22:44:59 hyde

問題你仍然可以點擊沒有顯示的圖像 –

例如使用一個類來設置它們是否可點擊。 http://jsfiddle.net/XYZZx/17/ – hyde

原型有一個方法叫做absolutizeLink，它應該適用於您的方案。由於您使用jQuery你可能想看看這個插件：

jQuery.fn.absolutize = function() 
{ 
    return this.each(function(){ 
    var element = jQuery(this); 
    if (element.css('position') == 'absolute'){ 
     return element; 
    } 

    var offsets = element.offset(); 
    var top = offsets.top; 
    var left = offsets.left; 
    var width = element[0].clientWidth; 
    var height = element[0].clientHeight; 

    element._originalLeft = left - parseFloat(element.css("left") || 0); 
    element._originalTop = top - parseFloat(element.css("top") || 0); 
    element._originalWidth = element.css("width"); 
    element._originalHeight = element.css("height"); 

    element.css("position", "absolute"); 
    element.css("top", top + 'px'); 
    element.css("left", left + 'px'); 
    element.css("width", width + 'px'); 
    element.css("height", height + 'px'); 
    return element; 
    }); 
}

來源：Link

使用此凍結目標元素的大小/位置，DOM前發生變化：

$('#grid li').absolutize();

來源

2013-07-23 22:33:43

我會嘗試使用jQuery的動畫簡單地淡化其不透明度爲0。實際上什麼也淡出淡入是不透明度到z ero，然後一旦它爲零，它會設置「display：none」，以使對象消失。你只想做前者！像$（'myobjects'）。animate（{opacity：0}，slow）;希望我的語法在那裏是正確的。乾杯!

來源

2013-07-23 22:39:43

Matty-d謝謝你的工作，但你仍然可以點擊已經去掉不透明度0的圖像，我不能點擊背景將所有東西都帶回去。 –

啊是的，然後在動畫發生後，讓對象可見性：隱藏。它仍然佔用空間，但不會在那裏讓用戶點擊！ –

我試過了，但我似乎沒有工作，我敢肯定這是我的代碼$（this）.siblings（）.css（「visibility」，「hidden」）}; –

當動畫發生時將圖像保存在其位置

回答

相關問題