用于扩展细节问题的 jQuery 动画答案

【问题标题】：jQuery animation for expanding details issues用于扩展细节问题的 jQuery 动画
【发布时间】：2013-04-10 13:34:44
【问题描述】：

好的，所以我仍在尝试掌握 jQuery。

我已经差不多了！我需要关闭按钮开始关闭，但因为它在同一个容器中，它也会启动其他动画。有什么建议吗？

到目前为止，这是我的代码的 jsfiddle 链接http://jsfiddle.net/w39Bb/5/

$('.outer-shell').click( function () {
    $(this).animate({
        height: '580px'
    }, 750).addClass('selected');
    $(this).find('.inner-shell').animate({
        height: '550px'
    }, 750);
    $(this).find('.details-click').animate({
        width: "0"
    }, 400).hide(100);
    $(this).find('.image-left-small , .image-right-small').animate({
        opacity: 0
    }).hide(400);
    $(this).find('.image-left-large, .image-right-large').animate({
        opacity: 1
    }).show(0);
    $(this).find('.close').animate({
        opacity: 1
    }, 1000).show();
});

$('h1.close').click(function () {
    $('.outer-shell').animate({
        height: '235px'
    }, 200).removeClass('selected');
    $('.inner-shell').animate({
        height: '229px'
    }, 200);
    $('.details-click').animate({
        width: '299px'
    }, 100).show();
    $('.image-left-small , .image-right-small').animate({
        opacity: 1
    }, 100).show();
    $('.image-left-large, .image-right-large').animate({
        opacity: 0
    }, 400).hide();
});

$('.outer-shell').hover( function () {
  $(this).toggleClass('hover');
});

【问题讨论】：

您需要使用外壳上的“id”来编写脚本，然后定位您所指的外壳。

标签： jquery animation

【解决方案1】：

不确定这是否是您想要实现的目标，但.. 添加 stopPropagation ？

$('h1.close').click(function (e) {
    e.stopPropagation();
    // The rest is the same :)

http://jsfiddle.net/w39Bb/6/

【讨论】：

这可行，但我需要关闭文本消失。点击关闭后。
非常感谢您的帮助。

【解决方案2】：

如果你隐藏另一个你不想使用$('#div-to-hide').hide()的div，它对你有用吗

【讨论】：

不确定这是否可行，因为我将在以后添加更多细节 div。