0

我有 3 个带有 mouseenter、mouseleave 和 click 功能的 div。问题出在点击事件中 - 我在使其动画级联功能工作时遇到了一些麻烦。我认为问题出在函数的“第二级”'$(this)'上：

$('.compositos_DBitems_container').on('click', '> div > div:not(.compositos_highlighted)', function () {

    // De-highlight currently highlighted item
    function dehighlight_clickedCompositos() {
        $('.compositos_DBitems_container > div > div.compositos_highlighted').removeClass('compositos_highlighted')
        .animate({ 'width': '70%', 'height': '70%', 'top': '10%' }, 150, 'swing')
        .find('p').animate({ 'font-size': '73%' }, 150, 'swing', function () {
            $(this).animate({ 'width': '90%', 'height': '90%', 'top': '0%' }, 150, 'swing')
            .find('p').animate({ 'font-size': '100%', 'color': 'rgba(0, 0, 0, 0.5)' }, 150, 'swing');
        });
    }

    // Highlight clicked item
    $(this).addClass('compositos_highlighted').animate({ 'width': '70%', 'height': '70%', 'top': '10%' }, 300, 'swing')
    .find('p').animate({ 'font-size': '73%' }, 300, 'swing', function () {
        $(this).animate({ 'width': '100%', 'height': '100%', 'top': '-4.5%' }, 300, 'swing')
        .find('p').animate({ 'font-size': '110%', 'color': 'rgba(255, 255, 255, 0)' }, 300, 'swing');
    });

});

小提琴

这是一个 2 级动画：当您单击它时，div 会缩小，然后又会重新增长——不过，它只在执行 1 级。

帮助？

佩德罗

4

1 回答 1

0

不知道你以后想做什么，但我想你应该保存对 jquery 元素的引用以便以后访问它。这是在回调函数中引用 p 元素而不是父元素。

var button = $(this);
$(this).addClass('compositos_highlighted').animate({ 'width': '70%', 'height': '70%',     'top': '10%' }, 300, 'swing')
.find('p').animate({ 'font-size': '73%' }, 300, 'swing', function () {
    button.animate({ 'width': '100%', 'height': '100%', 'top': '-4.5%' }, 300, 'swing')
    .find('p').animate({ 'font-size': '110%', 'color': 'rgba(255, 255, 255, 0)' }, 300, 'swing');
});

http://jsfiddle.net/BMeMt/6/

于 2013-07-11T13:23:33.953 回答