JQuery - .animate ;

发布于 2024-10-04 23:37:18 字数 457 浏览 1 评论 0原文

早安先生堆栈溢出。

是否可以在 2 个 img 之间制作动画？就像，改变img src &淡入新的img src？

Html

<img class="classimg" src="images/example.png" />

我的伪 jquery/javascript 代码：

On Click
    Animate .classimg height 50 width 100 opacity 1, 600
    Animate .classimg height 200 width 450, 400
    Animate .classimg change img src to url(images/example_with_green.png), 700

感谢您的努力 - 祝 12 月 1 日愉快！

原文

Morning mr. Stackoverflow.

Is it possible to .animate between 2 img ? Like, change the img src & fade to the new img src?

Html

<img class="classimg" src="images/example.png" />

My pseudo jquery/javascript code:

On Click
    Animate .classimg height 50 width 100 opacity 1, 600
    Animate .classimg height 200 width 450, 400
    Animate .classimg change img src to url(images/example_with_green.png), 700

Thank you for your affort - and a good 1st dec!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

反差帅 2024-10-11 23:37:18

正如罗伯特所说，你可以做的是：

<script type="text/javascript">

        $(function () {
            // find the div.fade elements and hook the hover event
            $('div.fade').hover(function() {
                // on hovering over find the element we want to fade *up*
                var fade = $('> div', this);

                // if the element is currently being animated (to fadeOut)...
                if (fade.is(':animated')) {
                    // ...stop the current animation, and fade it to 1 from current position
                    fade.stop().fadeTo(1000, 1);
                } else {
                    fade.fadeIn(1000);
                }
            }, function () {
                var fade = $('> div', this);
                if (fade.is(':animated')) {
                    fade.stop().fadeTo(1000, 0);
                } else {
                    fade.fadeOut(1000);
                }
            });
        });

    </script>

HTML：

    <div class="fade">
            <img src="logo.png" alt="Who we are" />
            <div>
                <img src="logoalt.png" alt="Who we are" />
    </div>
</div>

As Robert said what you can do is this:

<script type="text/javascript">

        $(function () {
            // find the div.fade elements and hook the hover event
            $('div.fade').hover(function() {
                // on hovering over find the element we want to fade *up*
                var fade = $('> div', this);

                // if the element is currently being animated (to fadeOut)...
                if (fade.is(':animated')) {
                    // ...stop the current animation, and fade it to 1 from current position
                    fade.stop().fadeTo(1000, 1);
                } else {
                    fade.fadeIn(1000);
                }
            }, function () {
                var fade = $('> div', this);
                if (fade.is(':animated')) {
                    fade.stop().fadeTo(1000, 0);
                } else {
                    fade.fadeOut(1000);
                }
            });
        });

    </script>

And the HTML:

    <div class="fade">
            <img src="logo.png" alt="Who we are" />
            <div>
                <img src="logoalt.png" alt="Who we are" />
    </div>
</div>

回复收藏 0 原文

半仙 2024-10-11 23:37:18

仅使用单个 HTML img 元素是不可能实现这一点的。您可以做的是对重叠图像进行动画/淡入淡出。淡入一个，另一个淡出。

jQuery animate() 函数只能对三维 CSS 样式进行动画处理。要还允许彩色动画，您必须使用 jQuery UI 效果。但没有像两个图像源这样的开箱即用的支持。

将所有图像放入同一个 DIV 容器中，如下所示：

<div style="position:relative;">
    <img src="..." style="position:absolute;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
</div>

然后循环浏览这些图像并根据需要执行动画。

This is not possible with just a single HTML img element. What you can do is animate/fade to overlaid images. Fade one in and the other one out.

jQuery animate() function can only animate dimensional CSS styles. To also allow colour animations, you have to use jQuery UI effects. But nothing like two image sources is supported out of the box.

Put all images in the same DIV container like this:

<div style="position:relative;">
    <img src="..." style="position:absolute;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
</div>

and then cycle through these images and do animations as appropriate.

回复收藏 0 原文