Question

我有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');
    });

});

FIDDLE

这是一个2级动画：当你点击它时，div缩小然后重新进入 - 但它只是在第1级。

帮助？

佩德罗

Answer 1

之后不知道你想要做什么，但我想你应该保存对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/

级联功能（动画）和$（'this'）

1 个答案: