使用jquery添加对角线显示/隐藏

我正在尝试使用切换和动画创建显示/隐藏效果

我制作了以下小提琴：

使用此代码的：

<script>

$(document).ready(function(){

$('.moreinfo').hide();

$('.more').click(function (ev) {
var t = ev.target

$('#info' + $(this).attr('target')).slideToggle(500, function(){
console.log(ev.target)

$('#info2').animate({width: 570, height: 570, marginLeft: 0}, {duration: 2000},
    "linear");
});

$(t).html($(this).is(':visible')? 'Hide Info (x)' : 'Show Info (+)')

});

return false;

});

</script>

问题如下：

我希望文本显示和动画同时发生。当前显示文本，然后动画开始。 一旦动画发生，当我点击“隐藏信息x”时，我希望文本变回“显示信息+”。它不能做到这一点。它不断显示“隐藏信息x”。 如何反转动画以使蓝色框再次收缩？

---

提前感谢您的时间和帮助。

我已经解决了您的第二个和第三个问题

2您可以根据“隐藏信息x”是否可见来更改文本。一旦可见，它将永远不会隐藏，因此将永远不会切换

3您可以设置蓝色框的动画以增大其大小，但决不能设置动画以将其设置回原始大小

更新：对于第一期，您可以尝试添加淡出、更改html、淡出，以将其降低到动画的速度

---

我曾经使用过堆栈溢出，事实上，当遇到问题时，人们更喜欢这种方法。您现在正在关注人们喜欢什么。对于您的第一个问题，请检查这里：

$('.more').click(function (ev) {
    var t = ev.target;

    $('#info' + $(this).attr('target')).slideToggle(500, function() {

        //$(t).html($(this).is(':visible')? 'Hide Info (x)' : 'Show Info (+)')
        if($(t).html() == 'Show Info (+)') {
            console.log(ev.target);
            $('#info2').animate({width: 570, height: 570, marginLeft: 0}, {duration: 2000}, "linear");
            $(t).fadeOut(function() {
                $(this).html('Hide Info (x)').fadeIn(2000);
            });
        } else {
            $('#info2').animate({width: 300, height: 20, marginLeft: 0}, {duration: 2000}, "linear");
            $(t).fadeOut(function() {
                $(this).html('Show Info (+)').fadeIn(2000);
            });
        }

    });

});