jQuery動畫浮動div

我想創建一個div的淡入動畫。這個想法是將div從右向左移動並淡入。由於佈局，div浮動在某個窗口寬度（即501px）的上方，並且低於（500px）。jQuery動畫浮動div

HTML

<div id="container"> 
    <div id="animated"></div> 
</div>

CSS

@media only screen and (min-width:501px) 
{ 
    #animated { 
     float:right; 
    } 
} 

@media only screen and (max-width:500px) 
{ 
    #animated { 
     float:left; 
    } 
}

當DIV浮動權一切正常，但當浮動屬性設置爲左運動停止工作。如何更改我的腳本以實現獨立於浮動屬性和CSS斷點的獨立代碼的獨特？提前致謝。

Fiddle

來源

2014-07-02 Giorgio

您可以使用jQuery來獲取瀏覽器窗口的寬度，然後做一個條件檢查上，對您的動畫。

的Javascript：

// Returns float of animated window based on CSS values 
var float = $('#animated').css('float'); 

if (float == 'right') { 
    $('#animated').css("margin-right", '10%').animate({ 
     "margin-right": "-=10%", 
     opacity: 1 
    }, 2000, 'swing'); 
} else { 
    $('#animated').css("margin-left", '10%').animate({ 
     "margin-left": "-=10%", 
     opacity: 1 
    }, 2000, 'swing'); 
}

DEMO http://jsfiddle.net/3L93z/3/

來源

2014-07-02 09:40:17

我明白你的意思，但我的目標是創建兩個動畫，這不取決於從窗口寬度的唯一代碼。在腳本中檢測窗口寬度將腳本綁定到CSS。如果我改變CSS的突破點，我也必須改變腳本。這就是爲什麼我想創建一個唯一的代碼，它不依賴於CSS屬性（即窗口寬度或浮動屬性）。 – Giorgio

確定已編輯它以使用'float'css屬性僅將約束保留在CSS中。 –

jQuery動畫浮動div

回答

相關問題