如何使用jquery（animate）更改位置和z-index(How to change position and z-index using jquery (animate))

有没有办法改变动画的位置和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>

如果不可能，有任何建议我怎么能这样做？

Is there any way to change an animation also the position and the z-index of a div?

Here's the code and what I'd like is the property to be set on mouse click in this order.

<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>

If its not possible, any suggestion about how can I do this?

最满意答案

您无法使用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参数， 如此答案所示。

You cannot animate the position and z-index attributes with jQuery. Try this:

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); }); }); });

Or if you really need the z-index to gradually change you can use the step parameter of animate as shown in this answer.

如何使用jquery（animate）更改位置和z-index(How to change position and z-index using jquery (animate))

有没有办法改变动画的位置和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>

如果不可能，有任何建议我怎么能这样做？

Is there any way to change an animation also the position and the z-index of a div?

Here's the code and what I'd like is the property to be set on mouse click in this order.

<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>

If its not possible, any suggestion about how can I do this?

最满意答案

您无法使用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参数， 如此答案所示。

You cannot animate the position and z-index attributes with jQuery. Try this:

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); }); }); });

Or if you really need the z-index to gradually change you can use the step parameter of animate as shown in this answer.