1

http://www.templatemonster.com/flash-templates/27545.html(サムネイルにカーソルを合わせようとしたとき)のように効果をシミュレートしようとしています。

私はjQueryとイージングプラグインを使用しています。これは私がこれまでに持っているものです:http://jsfiddle.net/RtYMV/

JS:

$(document).ready(function() {
    $('.line a').hover(
        function() {
            $(this).find('img').stop().animate({
                width: '88px',
                height: '88px',
                top: '6px',
                left: '6px',
                easing: 'easeInBounce'}, 111);
        },
        function() {
            $(this).find('img').stop().animate({
                width: '100px',
                height: '100px',
                top: '0',
                left: '0',
                easing: 'easeOutBounce'}, 111);
    });
});

しかし、明らかに私はイージングプラグインの実行に問題があります。

4

1 に答える 1

1

この.animate()関数は、各オプションの個別のパラメーターまたは2つのオブジェクトマップパラメーターの両方を受け取ることができます。最初のパラメーターはcssプロパティを示し、2番目のパラメーターは残りのプロパティを示します。したがって、コードは次のようになります。

$(document).ready(function() {
    $('.line a').hover(
        function() {
            $(this).find('img').stop().animate({
                width: '88px',
                height: '88px',
                top: '6px',
                left: '6px'},
                {easing: 'easeInBounce',duration: 111});
        },
        function() {
            $(this).find('img').stop().animate({
                width: '100px',
                height: '100px',
                top: '0',
                left: '0'},
                {easing: 'easeOutBounce',duration: 111});
    });
});

また、jsfiddleにjqueryイージングプラグインを含めていません(サイドバーの[リソースの管理]セクションで行います)。

作業デモを見る

于 2012-11-29T12:16:56.087 に答える