如何改变位置和z-索引使用jquery(动画)

How to change position and z-index using jquery (animate)

本文关键字：索引 jquery 动画 位置 何改变 改变      更新时间：2023-09-26

是否有任何方法可以改变动画的位置和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>

如果不可能，你有什么建议吗?

你不能用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指数逐渐变化，您可以使用animate的step参数，如本答案所示。

相关文章：