Question

我正在努力在我们公司的网站上制作一些“关于我们”页面。我有一张照片，而且我会在每个人的脑袋上放置绝对的演讲或“思想泡泡”，并提供信息。我无法共享页面，因为我们正在安全的服务器上开发，但我附加了我正在使用的JQuery。

<script type="text/javascript">
$(document).ready(function () {
    $('.readMore').toggle(function () {
        var width = $(this).width();
        var height = $(this).height();
        var increment = 200;
        $(this).parent().css("z-index", "9999").animate({
            "width": width + increment,
            "height": height + increment,
            "margin-left": -(width / 2)
        }, 300);
        $(this).html("Read less >>");
    });
});
</script>

我将动画设置为我想要的运行方式，但是我一直坚持的一件事就是这样。我希望JQuery在单击时捕获每个div的宽度和高度（它执行此操作。我将信息存储在两个称为width和height的变量中），然后用作animate函数的基础来设置它的宽度并且高度为原始+ 200px（这也可以正常工作）。但是，一旦该动画运行，我希望原始的宽度和高度变量保持与动画之前的相同，这样我就可以将div高度和宽度恢复为特定div的原始高度和宽度。有关如何实现这一目标的任何想法？

Answer 1

您可以在ready（）之外声明变量，这些变量将使您的数据保持在函数之外。例如，您可以将原始宽度和高度保持在就绪函数之外的2变量上，并且它们在每次调用之间保持不变。

Answer 2

简单，从toggle范围定义变量，如下所示：

$(document).ready(function () {
    var originalWidth = $('.readMore').width(),
        originalHeight = $('.readMore').height();
    $('.readMore').toggle(function () {
        var width = $(this).width();
        var height = $(this).height();

        if (originalWidth !== width){
        //do the magic
        }

        if (originalHeight !== height){
        //do the magic
        }
    });
});

Javascript定义变量一次

2 个答案: