Question

我有这段代码用两个div执行动画，但包含照片的div的动画只能工作一次。我哪里出错了？

JQuery代码

(function ($) {
    "use strict";

    jQuery("#bio-chiara").click(function () {
        $(function () {
            $("#foto-chiara").each(function (index) {

                if ($(this).css('top') == '0px') {
                    $(this).stop().animate({
                        bottom: '0px'
                    }, 1000);
                };
                if ($(this).css('bottom') == '0px') {
                    $(this).stop().animate({
                        top: '0px'
                    }, 1000);
                };
            });
        });
    });
}(jQuery));

Answer 1

问题是你在不移除另一个属性的情况下动画不同的属性。

尝试动画顶级属性：

           if ($(this).css('top') == '0px') {
                $(this).stop().animate({
                    top: $(window).height() + 'px'
                }, 1000);
            } else  {
                $(this).stop().animate({
                    top: '0px'
                }, 1000);
            };

动画完成后删除属性：

            if ($(this).css('top') == '0px') {
                $(this).stop().animate({
                    bottom: '0px'
                }, 1000, function() {
                    $(this).css('top', '');
                });
            };
            if ($(this).css('bottom') == '0px') {
                $(this).stop().animate({
                    top: '0px'
                }, 1000, function() {
                    $(this).css('bottom', '');
                });
            };

并删除点击事件中的额外$(function() {})，不需要

div的动画与照片工作只有一次

1 个答案: