如何使用 jquery（动画）更改位置和 z-index答案

【问题标题】：How to change position and z-index using jquery (animate)如何使用 jquery（动画）更改位置和 z-index
【发布时间】：2014-07-01 08:26:55
【问题描述】：

有什么方法可以改变动画的位置和 div 的 z-index 吗？

这是代码，我想要的是按此顺序在鼠标单击时设置的属性。

<script>
        jQuery(document).ready(function ($) {
            var youtubeVid = '<iframe src="//www.youtube.com/embed/Jcjsrt-xWdo" width="100%" height="100%" frameborder="0" allowfullscreen="" id="fitvid670345"></iframe>';
            $("#home-page-vid-image").on("click", function () {
                $("#home-page-vid-image").animate({    
                    position: "absolute",
                    z-index: "2",                
                    top: "463px",
                    width: "100%",
                    height: "541px"                  
                }, 1000, function () { $("#home-page-vid-image").html(youtubeVid)});               
            });
        });
</script>

如果不可能，有什么建议可以告诉我该怎么做吗？

【问题讨论】：

可能'z-index' 带引号，或者zIndex 不带引号。 javascript 属性不能有破折号-。
或者你可以使用样式属性
用zindex替换破折号，position和zindex属性都没有设置
它是zIndex，大写I，一般称为camelCase，用于javascript中的样式。

标签： javascript jquery

【解决方案1】：

您不能使用 jQuery 为 position 和 z-index 属性设置动画。试试这个：

jQuery(document).ready(function ($) {
    var youtubeVid = '<iframe src="//www.youtube.com/embed/Jcjsrt-xWdo" width="100%" height="100%" frameborder="0" allowfullscreen="" id="fitvid670345"></iframe>';
    $("#home-page-vid-image").on("click", function () {
        $("#home-page-vid-image")
            .css({position: "absolute"})
            .animate({                       
               top: "463px",
               width: "100%",
               height: "541px"                  
            }, 
            1000, 
            function () { 
               $(this)
                   .css({zIndex: "2"})
                   .html(youtubeVid);
            });               
    });
});

或者如果你真的需要z-index逐渐改变你可以使用animate的step参数，如this答案所示。

【讨论】：