爲什麼jQuery.animate位置不起作用？

我想.animate css position property from position : relative to position : absolute with jQuery。爲什麼jQuery.animate位置不起作用？

我有一個div div容器內的小div，我想擴展這個div時點擊一個按鈕，以適應窗口。

HTML：

<div id="container"> <!-- div with position:relative --> 
    <div id="content"> <!-- i want to expand this div using position:absolute to extract it from the container and to give width and height 100% --> 
     <button id="full">Full</button> 
     <button id="collapse">Collapse</button>   
    </div> 
</div>

我TREID與jQuery().animate但不與jQuery().css和工程工作，我TREID，但不是我想要的。

這是我做的：

$(document).ready(function() { 

$("#collapse").hide(); 

$("#full").bind("click", function (e) { 
    e.preventDefault(); 
    $("#content").animate({ 
     width: "1000px", 
     height:"1000px", 
     top:0, 
     left:0 
    }, 500).css({"overflow": "visible", "position":"absolute"}); 
    $("#full").hide(100); 
    $("#collapse").show(100); // can i use $("#collapse").css("display","block"); ? 
}); 

$("#collapse").bind("click", function (e) {  
    e.preventDefault(); 
    $("#content").animate({ 
     width: "400px", 
     height: "300px", 
    }, 500).css({"overflow": "visible", "position":"relative"}); 
    $("#full").show(100); 
    $("#collapse").hide(100); 
}); 
});

JsFiddle Demo

非常感謝您的幫助！
最好的問候。

來源

2013-07-02 Mustapha Aoussar

你想要那樣的東西嗎？ DEMO http://jsfiddle.net/yeyene/TJwsM/6/

$(document).ready(function() { 
    $("#collapse").hide(); 
    var p = $('#content').position(); 
    $("#full").bind("click", function (e) { 
     e.preventDefault(); 
     $("#content").animate({ 
      width: $(window).width(), 
      height:$(window).height(), 
      top: '0px', 
      left: '0px'    
     }, 500); 
     $("#full").hide(100); 
     $("#collapse").show(100); 
    }); 

    $("#collapse").bind("click", function (e) {  
     e.preventDefault(); 
     $("#content").animate({ 
      width: "400px", 
      height: "300px", 
      top: p.top+'px', 
      left: p.left+'px'       
     }, 500); 
     $("#full").show(100); 
     $("#collapse").hide(100); 
    }); 
});

來源

2013-07-02 10:03:51 yeyene

非常感謝，但我想動畫的位置，因爲當我點擊「全按鈕」div移動到頂部沒有任何效果，然後開始動畫。你注意到了嗎？ –

啊，是的，讓我再次測試它是否可以製作動畫。 – yeyene

檢查我的更新答案，並再次演示，現在你想要的動畫工作（但不是第一次），我也不知道爲什麼。但是在第一次點擊之後，它正在製作漂亮的頂部和左側動畫。 – yeyene

Position屬性本身不具動畫性。您可以更改left,top和bottom值以獲得移動效果。

來源

2013-07-02 09:55:32 raam86

這是一個簡單的解決方案，以你提到的問題，重寫：

http://jsfiddle.net/vj36r/

HTML：

<div id="container"> 
    <div id="content"> 
     <button id="full">Full</button> 
     <button id="collapse">Collapse</button> 
    </div> 
</div>

CSS：

div#container { 
    position:relative; 
    width:400px; 
    height:600px; 
    background-color:#EEFFEE; 
} 
div#content { 
    position:relative; 
    background-color:#FFEEEE; 
    overflow:visible; 
}

JS：

$(document).ready(function() { 
    $("#collapse").hide(); 
    $("#content").animate({ 
     top: 40, 
     marginLeft: 10, 
     marginRight: 10, 
     marginBottom: 10 
    }, 0); 
    $("#full").bind("click", function (e) { 
     e.preventDefault(); 
     $("#content").animate({ 
      top: 0, 
      marginLeft: 0, 
      marginRight: 0, 
      marginBottom: 0 
     }, 500); 
     $("#full").toggle(); 
     $("#collapse").toggle(); 
    }); 
    $("#collapse").bind("click", function (e) { 
     e.preventDefault(); 
     $("#content").animate({ 
      top: 40, 
      marginLeft: 10, 
      marginRight: 10, 
      marginBottom: 10 
     }, 500); 
     $("#full").toggle(); 
     $("#collapse").toggle(); 
    }); 
});

來源

2013-07-02 10:30:51 KVarmark

非常感謝，但這不是我想要的。我說我想擴大容器內的div使用位置：絕對**從容器中提取它**並給予寬度和高度100％。你的例子只有動畫邊距。非常感謝你的幫助！ :) –

更改元素的顯示類型的視覺效果不能動畫。因此，從相對到固定會「彈出」元素的寬度和高度。如果您真的想要這樣做，您可以獲得#content的已轉換絕對位置/邊界，並在設置其位置= fixed後將其設置在#content上，然後將其設置爲視口的整個寬度。雖然這種「模態窗口」效果可以通過其他更簡單的方法實現，但似乎有點多。我不知道項目的背景，當然...... – KVarmark

您可以添加能夠更改div的位置一類，並使用.addClass和.removeClass方法來激活類元素被點擊時。

$(document).ready(function() { 

$("#collapse").hide(); 

$("#full").bind("click", function (e) { 
    e.preventDefault(); 
    $(this).addClass("position"); 
    $("#content").animate({ 
    width: "1000px", 
    height:"1000px", 
    top:0, 
    left:0 
    }, 500).css({"overflow": "visible", "position":"absolute"}); 
    $("#full").hide(100); 
    $("#collapse").show(100); // can i use $("#collapse").css("display","block"); ? 
}); 

$("#collapse").bind("click", function (e) {  
    e.preventDefault(); 
    $(this).addRemove("position"); 
    $("#content").animate({ 
     width: "400px", 
     height: "300px", 
     }, 500).css({"overflow": "visible", "position":"relative"}); 
    $("#full").show(100); 
    $("#collapse").hide(100); 
}); 
}); 




    css 
    .position{ 
     position: absolute; 
    }

來源

2016-06-15 13:59:15

爲什麼jQuery.animate位置不起作用？

回答

相關問題