Question

我需要将jQuery切换和动画功能链接在一起。当我点击框时，它的大小应该改变。我的代码js fiddles snip就在这里。为什么它不起作用？它在启动时消失。

$(document).ready(function() {
$('.adiv').toggle(
   function(){
        $(this).animate({
            width: "150",
            height: "150",
        }, 1000);
    },
    function(){
        $(this).animate({
            width: "77", 
            height: "77",
        }, 1000);        
});
});

Answer 1

Toggle将隐藏/显示元素，因为在第一次调用切换函数时，元素在初始加载时可见，它将设置动画，但是切换将在元素上设置显示无，从而使其隐藏。您不应该使用切换功能。

你应该使用这样的东西：

$(document).ready(function() {
    var big = false;
    $('.adiv').on('click', function(){
        if( big ) {
             $(this).animate({
                    width: "77", 
                    height: "77",
                }, 1000);        
        } else {
            $(this).animate({
                    width: "150",
                    height: "150",
                }, 1000); 
        }
        big = !big;
    });
});

以下是一个工作示例：http://jsfiddle.net/x7f34vr5/1/

Answer 2

您需要指定一个点击处理程序，否则它将立即运行。例如

$('.adiv').click( function () {
// Do stuff here
});

切换和动画并没有真正融合在一起 - 这是一种不同的方式：

$(document).ready(function () {
    $('.adiv').click( function () {
        var newSize = $(this).width() > 77 ? 77 : 150;

        $(this).animate({
            width: newSize,
            height: newSize,
        }, 1000);
    });
});

Fiddle here

用于动画功能的Jquery切换操作

2 个答案: