0

mouseenter、mouseleave、およびクリック機能を備えた3つのdivがあります。問題はクリック イベントにあります。アニメーション カスケード機能を動作させるのに少し問題があります。問題は関数の「第 2 レベル」「$(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 に答える