为什么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位置不起作用？

回答

相关问题