0

ユーザーに、picture というクラスとアニメーション化するスパンを持つリンクにカーソルを合わせてもらいたい (パディング トップを増やす)。ユーザーがホバーしたものだけをアニメーション化する必要があります。

$('.picture').each(function(){
    $('.picture').hover(function(){
        $('.picture span').animate({
            'padding-top' : '20px'
        },'fast');
    });

    $('.picture').mouseout(function(){
        $('.picture span').animate({
            'padding-top' : '10px'
        },'fast');
    });
});

各機能のどこかで間違っていると思いますが、確信が持てません。それへのリンクはここにあります：http: //bathroomsyork.co.uk/

4

4 に答える 4

5

あなたの外からのeach()呼びかけには何のメリットもありません。これを試してください：

$('.picture').hover(
    function() {
        $(this).find('span').animate({'padding-top' : '20px'},'fast');
    },
    function() {
        $(this).find('span').animate({'padding-top' : '10px'},'fast');
    }
);

すべてのピクチャ クラス要素を選択してから、hover()関数の両方のパラメーターを使用して指定し、コールバックmouseenterをmouseleaveイベントすることに注意してください。

各コールバック内で、現在ホバーされている要素の子スパンを取得し$(this)、アニメーションを実行します。

于 2013-01-16T23:34:33.340 に答える
3

すべての要素を反復処理する必要はありません。イベント ハンドラーを、一致するすべての要素に同時にバインドできます。

また、ホバーされた要素から$('span', this)正しいものを選択するために使用します。<span>

$('.picture').on({
  mouseenter: function () {
    $('span', this).animate({
      'padding-top': '20px'
    }, 'fast');
  },
  mouseout: function () {
    $('span', this).animate({
      'padding-top': '10px'
    }, 'fast');
  }
});
于 2013-01-16T23:28:08.133 に答える
1

これは最終的には機能しました:

$('.picture').each(function(){
    $(this).hover(function(){
        $('span', this).animate({
            'padding-top' : '20px'
        },'fast');
    }, function(){
        $('span', this).animate({
            'padding-top' : '10px'
        },'fast');
    });
});

on() を使って例を試したところ、コンソール エラーが発生しました。これまでに見たことのない正確な動作は何ですか?

とにかくありがとう。

于 2013-01-16T23:57:52.103 に答える
0

必要ありませんeach。

$('.picture').on('mouseenter mouseleave', function(e){
    var padding = e.type == 'mouseenter' ? '20px' : '10px';
    $('span', this).animate({
        'padding-top' : padding
    },'fast');
});
于 2013-01-16T23:26:15.507 に答える